How to use javascript to get html special characters in text input

Question

I want to sent some html special character to text field and then later use javascript to get it back in its original format: like if I sent "&pi", it will shows "π" on the text input, and when I use javascript to get it back, I should get "&pi", but I only can get "π", not "&pi". Please help, my code is like the following:

<script type="text/javascript"> 
function qpush(a) {
    document.getElementById('input').value += a;
}

function show(a) {
    alert(document.getElementById('input').value);
}
</script>

<input type="text" id="input" />
<input type="button" onclick="qpush('&pi;');" value="&pi;" />
<input type="button" onclick="show()" value="go" />

Solution 1

Depending on what you need the it for you could do one of 3 options:

1. use the javascript escape and unescape functions:

   var escaped = escape('π') // escaped = "%u03C0" which unescape will turn back into π

2. If you have jQuery available it's html method might do the trick:

   $('input').val().html()

3. This is a hack but will work: Save a copy of the value the way you want it returned on a 'data-' attribute of the input element, this will validate in html5 and won't break in other doctypes.

   document.getElementById('input').setAttribute('data-originalValue', '&pi')

Solution 2

The value property will give you text, not HTML.

You could try getAttribute('value') but since π and π are identically equivalent in HTML, a browser is entirely free to return π for that too.

Once the HTML has been converted into a DOM, there is no way to access the original HTML (short of downloading the HTML again with XHR and parsing the raw text of it yourself).

If you want the data to be "π" then the HTML for it needs to be π.

If you want that and the rendering on the button to be π then you need:

<button type="button" value="&amp;pi;">π</button>

(Keeping in mind the various bugs that old-IE has with the button element)

That will, of course, display π when you copy the value to the text input.