Is there a way in javascript to detect if a word/string was typed in a textarea? I want to detect the string <svg> being inputed in Ace editor or CodeMirror and then do something else. Sounds like it has been implemented but I don't know how.
Is there a way in javascript to detect if a word/string was typed in a textarea? I want to detect the string <svg> being inputed in Ace editor or CodeMirror and then do something else. Sounds like it has been implemented but I don't know how.
4 Answers
Reset to default 2It is possible in Javascript to bind to the key up/down/press/etc events on DOM objects. You have to set the appropriate attribute in the HTML.
<textarea onkeyup='checkText(this.value);'></textarea>
This is the key line that calls the Javascript function with the value (text) of the textarea.
Here is a plete example that demonstrates this use. Listening on Key Up is preferred since the new character will be in the text value before the function is called.
<html>
<head>
<script type='text/javascript' >
var oldText = '';
function checkText(text)
{
if(text.length >= 1)
{
if(text == '<svg>' && text != oldText)
{
alert("<svg> found");
}
}
oldText = text;
}
</script>
<body>
<textarea onkeyup='checkText(this.value);'></textarea>
</body>
</html>
I know this is somewhat similar to the others' answers, but it offers an alternative approach:
document.getElementById('textArea').onkeypress = function() {
if(/\<svg\>/i.test(document.getElementById('textArea').value) === true) {
// do whatever you want here
}
}
If you're not familiar with RegExes in JS, they're a great way to find certain strings in things - say, a user's input, like you want. The i flag after the creation ignores the case, just in case you didn't know. Also, putting this script in the head without an onload event or something of the sort won't work - there's nothing for the script to search, since the document hasn't been fully loaded yet.
Hope this helped!
You can pare what is typed with what you expect using the onchange event.
<html>
<script>
function checktext(){
var val = document.getElementById("textbox").value;
// val is what is in the textbox
// pare val here
// for example
if (val == "<svg>"){
alert(val);
}
}
</script>
<body>
<textarea id="textbox" onchange="checktext()"></textarea>
</body>
</html>
In CodeMirror, the "change" event is fired whenever the code changes. You can simply scan the content for the string you are interested in when this fires. Or, if you expect a huge document, and want this to be efficient, you can only scan the changed part of the document (taking care to handle the case where the string is on the boundary of the changed and unchanged parts).
cmInstance.on("change", function(cm) {
if (cm.getValue().indexOf("<svg>") > -1)
doSomething();
});