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" />

Answer 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')