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: 182
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>
© Stack Overflow or respective owner
