Insert HTML entities in form elements with javascript Options

[Christian J]

CODE

<input type="text" id="x" value="">
<script type="text/javascript">
window.onload=function()
{
    document.getElementById('x').value='&amp;';
}
</script>

The above renders the &amp; entitity not as an ampersand, but literally. How can you avoid this?

[pandy]

Why use an entity in JS if you don't want an entity in the output?

[pandy]

If that &amp; comes from somewhere else, can't you convert it to & before you use it? Or is this what you want?

CODE

document.getElementById('x').value = '\x26';

I feel you don't provide enough information here!

[Christian J]

Because most entities are missing on my keyboard. But I guess I could copy them from some reference... :-/

[pandy]

I don't have any entities at all on my keyboard, just letters and numbers and squiggly characters.

Is this true? Come on, buy a new keyboard! Even I can afford that. BTW doesn't that Notetab replacement you use have the ability to insert predefined text in the document? You could use that.

[Brian Chandler]

Because most entities are missing on my keyboard. But I guess I could copy them from some reference... :-/

Can't you use this?

http://imaginatorium.org/svc/unicode.htm

[Brian Chandler]

I don't have any entities at all on my keyboard, just letters and numbers and squiggly characters.

I don't believe that, incidentally. Every key on my keyboard has one or more entities written on it; every key on my keyboard _is_ an entity; my keyboard is an entity, it rest on another entity, is connected to another entity by yet another entity, is operated by and is generally surrounded by an immense number of entities.

What a stupid name. But what else can you expect from people who can't for example spell 'referrer'.

[Christian J]

If that &amp; comes from somewhere else, can't you convert it to & before you use it?

Sure. But I'd rather type it on my keyboard (ideally from my memory) than highlight, copy & paste the rendered character from some web page reference.

Or is this what you want?

CODE

document.getElementById('x').value = '\x26';

Yes that did mysteriously work. What's the difference as far as JS is concerned? And why does the escaping backslash make JS recognize it as an whateveritis?

I feel you don't provide enough information here!

There's nothing more to it, just curious.

[Christian J]

I don't have any entities at all on my keyboard, just letters and numbers and squiggly characters.

Bah, I meant special characters like &.

[Christian J]

Can't you use this?

http://imaginatorium.org/svc/unicode.htm

Doesn't that convert in the other direction (character to entity) only?

[pandy]

If that & comes from somewhere else, can't you convert it to & before you use it?

Sure. But I'd rather type it on my keyboard (ideally from my memory) than highlight, copy & paste the rendered character from some web page reference.

But where do you want to type it? In any document in any program or in forms in IE?

Or is this what you want?

CODE

document.getElementById('x').value = '\x26';

Yes that did mysteriously work. What's the difference as far as JS is concerned? And why does the escaping backslash make JS recognize it as an whateveritis?

Because those escape sequences are to JS what entities are to HTML. When you use the HTML entity in JS it's just a string lika any other, has no special meaning.

[Christian J]

But where do you want to type it? In any document in any program or in forms in IE?

In JS, like in my very first example. BTW here's what appears to be a related issue: http://www.webreference.com/programming/ja...ipt/ppk2/2.html

Because those escape sequences are to JS what entities are to HTML. When you use the HTML entity in JS it's just a string lika any other, has no special meaning.

Oh. Is there a table of this somewhere? I notice the similarity with &#x26; but have no idea of what the difference between that and \x26 signifies.

[pandy]

But where do you want to type it? In any document in any program or in forms in IE?

In JS, like in my very first example. BTW here's what appears to be a related issue: http://www.webreference.com/programming/ja...ipt/ppk2/2.html

There is no issue.
You said you didn't have those characters on your keyboard and I believed you. Should I not have?

Because those escape sequences are to JS what entities are to HTML. When you use the HTML entity in JS it's just a string lika any other, has no special meaning.

Oh. Is there a table of this somewhere? I notice the similarity with & but have no idea of what the difference between that and \x26 signifies.

\x26 is an escape sequence in JS. HTML entities has no special meaning outside HTML. The numbers are the same as in hex entities. The syntax is \xnn or for Unicode \unnnn where nn and nnnn are the actual numeric reference. So ampersand in unicode would be \u0026. Lowercase "ö" would be \xF6 or \u00F6 and so on. It isn't about "special characters". You can write any characters that way just as you can with numeric entities in HTML.

CODE

<p onclick="alert('\x43\x68\x72\x69\x73\x74\x69\x61\x6E');">
&#x43;&#x68;&#x72;&#x69;&#x73;&#x74;&#x69;&#x61;&#x6E;</p>

Yeah, probably someone has made a table but you can just use a char map or an ordinary character table with the hex values.

[Christian J]

There is no issue.
You said you didn't have those characters on your keyboard and I believed you. Should I not have?

Come again? I do have "&", but not "©" etc...

HTML entities has no special meaning outside HTML.

So CDATA is outside HTML then? Indeed http://www.w3.org/TR/html401/types.html#type-cdata does say that "entities must be treated as raw text". But here's something odd, when writing a static entity it is rendered:

CODE

<input type="text" value="&amp;">

Shouldn't it be treated the same as in the javascript example?

CODE

<p onclick="alert('\x43\x68\x72\x69\x73\x74\x69\x61\x6E');">
&#x43;&#x68;&#x72;&#x69;&#x73;&#x74;&#x69;&#x61;&#x6E;</p>

Good example!

Yeah, probably someone has made a table but you can just use a char map or an ordinary character table with the hex values.

Seems strange that I didn't find anything on the subject when I googled (neither table nor tutorial). Isn't this an issue for others than me?

[pandy]

Come again? I do have "&", but not "©" etc...

Sheesh...

HTML entities has no special meaning outside HTML.

So CDATA is outside HTML then? Indeed http://www.w3.org/TR/html401/types.html#type-cdata does say that "entities must be treated as raw text". But here's something odd, when writing a static entity it is rendered:

I think the difference is that when you use an entity in the value of the value attribute it's parsed and interpreted by the browser. When you give the input control a value through JS, the characters are inserted in the box as if a user had typed them.

Seems strange that I didn't find anything on the subject when I googled (neither table nor tutorial). Isn't this an issue for others than me?

http://www.google.com/search?javascript+escape+sequences

[pandy]

I think the difference is that when you use an entity in the value of the value attribute it's parsed and interpreted by the browser. When you give the input control a value through JS, the characters are inserted in the box as if a user had typed them.

I don't know if I managed to express what I mean. When you have value="A&amp;B" this is parsed with the rest of the HTML. When you do the dynamic trick the &amp; is only treated by the JS engine and it treats it as a string to be inserted in the input box, the HTML parser never gets it. AFAIK JS isn't aware of HTML entities. That's how I figure it which isn't the same as that is how it really functions.

[Christian J]

I think the difference is that when you use an entity in the value of the value attribute it's parsed and interpreted by the browser. When you give the input control a value through JS, the characters are inserted in the box as if a user had typed them.

Not quite sure I understood (even after noticing your follow-up post ), but as an experiment I tried to give INPUT its value before inserting it into the page, but no difference:

CODE

window.onload=function()
{
    var input=document.createElement('input');
    input.value='&amp;';
    document.body.appendChild(input);
}

This seems to work, though:

CODE

var foo='&amp;';
document.write('<input value="'+foo+'">');

http://www.google.com/search?q=javascript+escape+sequences

Thank you.

Edit: seems the board renders my "&amp;" into "&" now and then, especially in code examples. Best to check what one's posting!

[pandy]

Not quite sure I understood (even after noticing your follow-up post ), but as an experiment I tried to give INPUT its value before inserting it into the page, but no difference:

I mean that when JS injects it it's only a string of characters.
If you are lucky Darin will notice our misery and explain it better. Maybe more correctly too.

This seems to work, though:

CODE

var foo='&';
document.write('<input value="'+foo+'">');

Because then it's HTML in the end.

Edit: seems the board renders my "&" into "&" now and then, especially in code examples. Best to check what one's posting!

If you use quick edit entities are converted.

[pandy]

I took the example in your first post and changed it as follows (added a hardcoded value).

CODE

<input type="text" id="x" value="bleh">
<script type="text/javascript">
window.onload=function()
{
    document.getElementById('x').value='&amp;';
}
</script>

Then opened the page in IE and used the View Partial Source gadget which ddoes the same thing as View Rendered Source for FF. I.E. it shows the JS output. Here is what I saw.

CODE

<INPUT id=x value=&amp;amp;>
<script type=text/javascript>
window.onload=function()
{
    document.getElementById('x').value='&amp;';
}
</SCRIPT>

[Liam Quinn]

So CDATA is outside HTML then? Indeed http://www.w3.org/TR/html401/types.html#type-cdata does say that "entities must be treated as raw text". But here's something odd, when writing a static entity it is rendered:

CODE

<input type="text" value="&amp;">

Shouldn't it be treated the same as in the javascript example?

No, CDATA is handled differently as element content than as an attribute value. From http://www.w3.org/TR/html401/types.html#type-cdata:

User agents should interpret attribute values as follows:
* Replace character entities with characters
[...]
Although the STYLE and SCRIPT elements use CDATA for their data model, for these elements, CDATA must be handled differently by user agents. Markup and entities must be treated as raw text and passed to the application as is.