...

View Full Version : Javascript altering a string going in to a textbox



rcb2603
07-16-2012, 02:04 PM
I grab a string with html like junk tags in it e.g. <foo>Hello World!</bar>.

I use, document.getElementById("foobar").value = thestring

The text that comes up? <FOO>Hello World!</FOO>...
(In Firefox its the above but lower case tags, In Opera it is just <FOO>Hello World!)


Im completely baffled by this and need a way of stopping it doing anything but displaying the string as it has it the line before setting the value. Preferably with an explanation as to why javascript is doing this in the first place.

Philip M
07-16-2012, 02:38 PM
I grab a string with html like junk tags in it e.g. <foo>Hello World!</bar>.

I use, document.getElementById("foobar").value = thestring

The text that comes up? <FOO>Hello World!</FOO>...
(In Firefox its the above but lower case tags, In Opera it is just <FOO>Hello World!)


Im completely baffled by this and need a way of stopping it doing anything but displaying the string as it has it the line before setting the value. Preferably with an explanation as to why javascript is doing this in the first place.

I don't really understand you. This works fine:-


<input type = "textbox" id = "foobar" value = "<foo>Hello World!</bar>" >

<script type = "text/javascript">

var thestring = document.getElementById("foobar").value;
alert (thestring); //<foo>Hello World!</bar>

</script>

As does:-


<input type = "textbox" id = "foobar" size = "40" value = "" >

<script type = "text/javascript">

var thestring = "xyz<foo>Hello World!</bar>xyz";
document.getElementById("foobar").value = thestring;

</script>


And where do these "junk tags" come from?


It is your responsibility to die() if necessary….. - PHP Manual

rcb2603
07-16-2012, 02:51 PM
I am selecting the html using innerHTML. This appears to be where the problem lies.

So the HTML has a hidden <span id="description_50"><hello>heffful</wut></span> along with an appropriate text area.

The javascript does the following


description_html = document.getElementById("description_50").innerHTML;
document.getElementById("section_description").value = description_html;

When it gets the innerHTML it seems to try to 'fix' the junk tags.

My current work around is to get PHP to display it as &lt;hello&gt;heffful&lt;/wut&gt; then the javascript replaces the &lt; and &gt; with < and >. This is quite clumsy though, changing the string back and forth when it neednt be changed at all.




Ive decided that although Im sure there must be a way of avoiding the double conversion of characters I will stick with that method. Its possible that in plain html even while hidden it will interfere with validation so there is good reason for the change.

I would still like to know exactly how innerHTML functions though. Ive never seen, nor can I find any mention of its interpretation of the code that it selects. Until now I (and every source Ive used including my O'Reilly books) assumed it simply grabbed or changed whatever was within the tags.

Philip M
07-16-2012, 04:34 PM
I still do not understand.


<span id="description_50">ABC<hello>itemA</wut><a>itemB</a></span>
<br><br>
<input type = "text" id = "section_description" size = "40">

<script type = "text/javascript">
description_html = document.getElementById("description_50").innerHTML;
alert (description_html);
document.getElementById("section_description").value = description_html;

</script>

For some reason IE converts the tags to upper case. If that is the problem you can convert them back:-


var html = '<HTML><HEAD><BODY>TEST STUFF HERE</BODY></HEAD></HTML>';
var regex = /<([^>]*)>/g;
html = html.replace(regex, function(x) { return x.toLowerCase() });
alert(html);

Appied here:-


<span id="description_50">ABC<hello>itemA</wut><a>itemB</a></span>
<br><br>
<input type = "text" id = "section_description" size = "40">

<script type = "text/javascript">
html = document.getElementById("description_50").innerHTML;
var regex = /<([^>]*)>/g;
html = html.replace(regex, function(x) { return x.toLowerCase() });
document.getElementById("section_description").value = html;

</script>


I was thown by your assertion - The text that comes up? <FOO>Hello World!</FOO>...
Nowhere have you mentioned that the issue is that the tags are converted to upper case.

rcb2603
07-16-2012, 05:49 PM
It converts them to upper-case in some browsers others it wont.
It will also alter or remove the closing differing tag to match the start tag. Again depending on the browser.

None of this behaviour is described in any of the material I have read. Given it is largely unpredictable depending on the browser Ive decided its easier to do the basic conversions using PHPs htmlspecialchar and a replace in the javascript. (Which solves another minor issue so its effective enough.)


The only issue that really remained for me was what exactly does innerHTML do.
I have made some headway with that. There are plans to standardise the parsing it does but at the moment its unpredictable behaviour is not only difficult to handle it poses some serious risks. textContent basically solves all of the problems but is not supported by IE8 and below. (Which we continue to support.) So Ill stick with ensuring the content has no html code in whatsoever until earlier IE support is dropped.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum