innerHTML and grave symbol
- From: ptr106@xxxxxxxxx
- Date: Thu, 28 Feb 2008 12:24:22 -0800 (PST)
I've been looking at a bug in my application when showing the grave
symbol (`) in a text input on a web page. It turns out that when
I assign the div innerHTML of one element to another div's innerHTML
the first div displays the grave symbol correctly and the second does
not. The first div will show an input box with the grave symbol, the
second will show the text of a rewritten input object (capitalization
is different, quotes are missing, etc). This only occurs on IE (I'm
using IE 7). On firefox, the innerHTML copy displays the results as I
would expect. Is this a bug in the way I am using innerHTML or with
IE? Sample HTML below.
Thanks,
Peter
<html>
<body>
<!-- Grave symbol does not show up correctly in IE -->
<div id="resultsDivtemp">
<table>
<tr>
<td>
<input type="text" name="test" size="38" value="`"
class="textinput" />
</td>
</tr>
</table>
</div>
<div id="resultsDiv1">
<script type="text/javascript">
function reloadDiv() {
parent.document.getElementById("resultsDiv1").innerHTML =
document.getElementById("resultsDivtemp").innerHTML;
}
reloadDiv();
</script>
</div>
<!-- Grave symbol does show up correctly in IE if you don't copy
from an innerHTML -->
<div id="resultsDiv2">
<script type="text/javascript">
parent.document.getElementById("resultsDiv2").innerHTML =
"<table><tr><td><input type=\"text\" name=\"test3\" size=\"38\" value=
\"`\" class=\"textinput\" /></td></tr></table>";
</script>
</div>
<!-- Less than symbol shows up correctly -->
<div id="resultsDivtemp3">
<table>
<tr>
<td>
<input type="text" name="test" size="38" value="<"
class="textinput" />
</td>
</tr>
</table>
</div>
<div id="resultsDiv4">
<script type="text/javascript">
function reloadDiv() {
parent.document.getElementById("resultsDiv4").innerHTML =
document.getElementById("resultsDivtemp3").innerHTML;
}
reloadDiv();
</script>
</div>
<!-- Double quote shows up correctly -->
<div id="resultsDivtemp5">
<table>
<tr>
<td>
<input type="text" name="test" size="38" value="""
class="textinput" />
</td>
</tr>
</table>
</div>
<div id="resultsDiv6">
<script type="text/javascript">
function reloadDiv() {
parent.document.getElementById("resultsDiv6").innerHTML =
document.getElementById("resultsDivtemp5").innerHTML;
}
reloadDiv();
</script>
</div>
<!-- Grave symbol escaped still does not work correctly -->
<div id="resultsDivtemp7">
<table>
<tr>
<td>
<input type="text" name="test" size="38" value="`"
class="textinput" />
</td>
</tr>
</table>
</div>
<div id="resultsDiv8">
<script type="text/javascript">
function reloadDiv() {
parent.document.getElementById("resultsDiv8").innerHTML =
document.getElementById("resultsDivtemp7").innerHTML;
}
reloadDiv();
</script>
</div>
<!-- Single quote shows up correctly -->
<div id="resultsDivtemp9">
<table>
<tr>
<td>
<input type="text" name="test" size="38" value="'"
class="textinput" />
</td>
</tr>
</table>
</div>
<div id="resultsDiv10">
<script type="text/javascript">
function reloadDiv() {
parent.document.getElementById("resultsDiv10").innerHTML =
document.getElementById("resultsDivtemp9").innerHTML;
}
reloadDiv();
</script>
</div>
</body>
</html>
.
- Prev by Date: Re: FAQ Updates
- Next by Date: Re: Best way to define "private" functions
- Previous by thread: How to set focus to a div?
- Next by thread: javascript bg image
- Index(es):