...

View Full Version : setTimeout to detect changes in a text field



Rain Lover
11-27-2012, 07:59 PM
I wonder why the following sample code doesn't work properly:


<!DOCTYPE html>
<html>

<head>
<title></title>
<style type="text/css">
textarea, iframe {
display:block;
width:300px;
height:100px;
margin:3px;
padding:3px;
border:1px solid #CCC;
}
</style>
</head>

<body>
<textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>
<iframe name="target"></iframe>
<script>
var textarea = document.getElementById('field');
var iframe = window.target.document;

function displayResult() {
if (textarea.value) {
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}

function getFocus() {
if (textarea.value == textarea.defaultValue) {
textarea.value = '';
}
}

function loseFocus() {
if (textarea.value == '') {
textarea.value = textarea.defaultValue;
}
}
displayResult();
</script>
</body>

</html>

Demo: http://jsfiddle.net/RainLover/4ksMR/

The iframe content is supposed to get updated in real time -- as soon as the textarea content changes by keyboard or mouse. This approach is an alternative to the oninput event. But since oninput isn't well-supported across different browsers I decided to create a timer to compare the current text field value with its value in 10 milliseconds before.

Philip M
11-27-2012, 08:08 PM
Help us to help you - explain what exactly is the problem and what you mean by "does not work properly".

Dormilich
11-28-2012, 07:50 AM
setTimeout to detect changes in a text field
wrong approach. there are events that trigger (e.g. "change"), if a text field changes. otherwise your setTimeout() will consume a lot of computing power.

Rain Lover
11-28-2012, 09:24 AM
Help us to help you - explain what exactly is the problem and what you mean by "does not work properly".

Just updated my question.

Rain Lover
11-28-2012, 09:26 AM
wrong approach. there are events that trigger (e.g. "change"), if a text field changes. otherwise your setTimeout() will consume a lot of computing power.

The change event works only if the text field loses focus and oninput isn't reliable. For example it's buggy in IE9: http://help.dottoro.com/ljhxklln.php
I just updated my question for more clarification.

Philip M
11-28-2012, 09:29 AM
Use onkeyup, onchange and onpaste to detect changes in the textarea.

Rain Lover
11-28-2012, 09:31 AM
Use onkeyup, onchange and onpaste to detect changes in the textarea.

Do they cover all possible changes to a text field content?

Philip M
11-28-2012, 09:34 AM
Do they cover all possible changes to a text field content?

I would have thought so.

Rain Lover
11-28-2012, 09:39 AM
I would have thought so.

How about the Cut or Delete commands in the mouse context menu?

Philip M
11-28-2012, 09:49 AM
How about the Cut or Delete commands in the mouse context menu?

Try them! I would have thought that onchange would capture these.

Why is is necessary to update the iframe so rapidly (10ms for heaven's sake!).
Surely one second (or more) is enough.

Rain Lover
11-28-2012, 09:54 AM
Try them! I would have thought that onchange would capture these.
The change event works only if the text field loses focus.


Why is is necessary to update the iframe so rapidly (10ms for heaven's sake!).
Surely one second (or more) is enough.
You're right. One second is acceptable, too.
What I'd like to do is create a timer to compare the current text field value with its value in 10 milliseconds or as you suggested 1 second before. Something like this:


function displayResult() {
if (textarea.value != textarea.value.10ms.ago) {
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}

Philip M
11-28-2012, 11:20 AM
Something like this:-




var t2 = "";
function displayResult() {
var t1 = textarea.value;
if (t1 != t2) { // textarea has changed
iframe.open();
iframe.write(t1);
iframe.close();
}
t2 = t1;
window.setTimeout(displayResult, 1000);
}

Rain Lover
11-28-2012, 11:29 AM
Perfect! Thanks! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum