Adding Character Entities in Text Fields with setAttribute()

Is it possible to add a character entity to an input field using javascript? I've been able to do it statically by just including it in the value attribute of the input tag like this:

            <input id="degInput" type="text" value="180&deg;">

However, I'm not able to use setAttribute() to add it dynamically. This is what I tried using JS:

            document.getElementById("degInput").setAttribute("value", "360°");

This caused the attribute value "360°" to be added to the input field exactly as it was written in the javascript code, instead of placing a little degrees symbol on the upper right side of "360". I'm learning actual beginner javascript scripting and I'm not interested in jQuerry at the moment. If anyone knows how to tackle this problem, I'd appreciate your help.

[pixelsoul]

This worked for me http://jsfiddle.net/pixelsoul/Ljor0f64/

I've never tried to do that before, so not sure if that is the best way to go about it.

From pixelsoul's example, you could do just this?

document.getElementById("degInput").value = "360\xB0";

However, I would question the wisdom of including this symbol in the input. I'd place it as a label/text behind the input. You can then use the input value directly in your calculations - depending on what you're doing - no need to strip the degree symbol at the other end. If the input is not being used to INPUT data, only to display it as an answer to a calculation, then OK I suppose, assuming that the user is then going to copy/paste that value to somewhere. If not, just use a normal html tag like <p>. Maybe I've got the wrong end of the stick.

http://jsfiddle.net/diafol666/Ljor0f64/1/

pixelsoul, it worked perfectly. The only problem now is I don't know what this version of character entities - \xB0 - is called. Do you know what it's called and where I can find a list of them? I'm sure I'll need to use them again at some point. Character names and numbers of the form &characterName; and &#999; work fine in HTML, but apparently they don't work in all javascript code.

[pixelsoul]

It's escaped UTF-8 encoded character http://www.charbase.com/00b0-unicode-degree-sign

diafol, the way you wrote that piece of code

document.getElementById("degInput").value = "360\xB0"; 

creates a weird effect for IE. I didn't try it in any other browsers, but the fact that it generates bizarre behavior in one of the big five makes me not want to use it at all.

When I used it for the input field, the placeholder text went away and was replaced with the value as it should have. However, even when I clicked the browser's refresh button, the value remained and wouldn't go back to the placeholder text. I got rid of the placeholder text and it still wouldn't go away - not even after clicking refresh.

The best way to write that line is like this:

document.getElementById("degInput").setAttribute("value","360\xB0");

Nevertheless, I'm glad you introduced me to the other way of writing that code because now I know what to watch out for. Thanks for your help.

[pixelsoul]

I will say that I do agree with diafol on using the special character inside of the input. I think it would be a better idea to use it outside in a label like he had mentioned.

I have no idea what you did DaniUserJS, or which version of IE you were using, but here's a screenshot of my code, with the degree symbol inside the textboxes as well.

Seen here: http://jsfiddle.net/Ljor0f64/2/

But symbols with numerical data not recommended. Floats and integers should be "clean".

pixelsoul, thank you for giving me the name of the javascript character encoding. That could help me a lot in the future. I bookmarked that page as well just to be on the safe side.

pixelsoul and diafol, I don't see anything wrong with using a symbol of any kind inside a text field. I think it's probably just a matter of style choice. Personally, I think that placing the degree symbol inside the text field is a more elegant solution and it didn't cause any conflicts or glitches.

diafol, as far as the weird glitch that the .value version of .setAttribute() caused, I'm using IE 11. I don't know if that makes a difference. But, the glitch did happen. I've never seen anything like it before. I clicked the refresh button expecting the new value to disappear and to my amazement, it just stayed there. It was almost as weird as unplugging a television and finding that doing so doesn't turn it off. Bizarre. I'm just going to keep using setAttribute().

One thing I did get from your screenshot though, diafol, was using text-align:right to push the content to the right side of the text field. That CSS property isn't new to me, but I never thought about using it in a text field. That does make placing a symbol outside of the text field more aesthetically pleasing, but I still prefer the other method.

All this stuff that I'm working on is just practice. It's more about what I can do with JS than what I'll actually do in a real life scenario for a client or in my own websites. In practice, I would probably set the display as a <p> as you suggested, diafol, and the input field would only pop up when the user wanted to enter some data.

Thanks to both of you guys for your help. I'm marking this problem as solved.

No worries DaniUserJS. Glad you got it sorted. As you know there are many ways to skin a cat and it's good to see that you trial things in a variety of browsers. The only thing about a symbol in a textbox is that if a form user is going to edit or enter a value in that textbox they need to know how to do it or it should be made easy for them to do so. If you're just populating a field for aesthetic purposes, e.g. as a result of a calculation, then it probably doesn't matter - unless that data is going to be used on form submission, in which case you may have to strip the symbol before using the data (e.g. storing to db in a further calculation). Just a heads up, that's all.