P
ptr106
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>
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>