How to retrieve an input's value without the browser interpreting html special entities?
- by CaptainQwyx
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>[<script>alert('scrubbed');</script>]</b></p>
</div>
Note that it works if I type/copy <script>alert('scrubbed');</script> 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="<script>alert('scrubbed');</script>" 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>
