How to retrieve an input's value without the browser interpreting html special entities?

Posted by CaptainQwyx on Stack Overflow See other posts from Stack Overflow or by CaptainQwyx
Published on 2010-04-20T20:57:02Z Indexed on 2010/04/20 21:03 UTC
Read the original article Hit count: 155

Is there a way in JavaScript or MooTools to retrieve the actual text in the value from an input element without the browser interpreting any html special entites? Please see the example included below. My desired outcome is:

<div id="output">
   <p>Your text is: <b>[&lt;script&gt;alert('scrubbed');&lt;/script&gt;]</b></p>
</div>

Note that it works if I type/copy &lt;script&gt;alert('scrubbed');&lt;/script&gt; directly into the text input box, but fails if I insert right after loading the page.

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>scrubtest</title>
</head>
<body id="scrubtest" onload="">
    <script type="text/javascript" language="JavaScript" src="/js/mootools-core.js"></script>

    <input type="text" name="scrubtext" value="&lt;script&gt;alert('scrubbed');&lt;/script&gt;" id="scrubtext"/><br />
    <input type="button" value="Insert" onclick="insertText();"/><br />

    <input type="button" value="Get via MooTools" onclick="alert($('scrubtext').get('value'));"/><br />
    <input type="button" value="Get via JavaScript" onclick="alert(document.getElementById('scrubtext').value);"/><br />

    <div id="output">
    </div>

    <script type="text/javascript" charset="utf-8">
        function insertText()
        {
            var stext = $('scrubtext').get('value');
            var result = new Element( 'p', {html: "Your text is: <b>["+stext+"]</b>"} );
            result.inject($('output'));
        }
    </script>

</body>
</html>

© Stack Overflow or respective owner

Related posts about html

Related posts about mootools