Welcome to WebmasterWorld Guest from 54.166.152.121

Forum Moderators: open

Message Too Old, No Replies

setTimeout to detect changes in a text field

     
7:41 pm on Nov 27, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



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: [jsfiddle.net ]
8:34 pm on Nov 27, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Seems to be working in the fiddle you provided... can you elaborate? What isn't it doing that you think it should be?
9:00 pm on Nov 27, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



The iframe content is supposed to get updated in real time, as soon as the textarea content changes.
9:20 pm on Nov 27, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



That's exactly what I see. Tried it in Chrome, Firefox, and IE9.
7:53 am on Nov 28, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



That's exactly what I see.


Please let me provide two examples:
1. Enter a sentence/code into the text field. Then select/highlight it. Now press the 'Delete' button on your keyboard. You won't see the same change on the iframe unless the textarea loses focus.
2. Enter a sentence and then delete all the letters using the 'backspace' key. You'll see the last letter remains in the iframe.
As I said 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. Something like this:

function displayResult() {
if (textarea.value != textarea.value.10ms.ago) {
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}
1:59 pm on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Ah, ok. That's because:
if (textarea.value)
If you delete the entire value, then this test will be false, and therefore the iframe will not be updated. Just remove the "if" condition.
4:16 pm on Nov 28, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



Now it works properly. But if I remove the if clause, the iframe gets updated every 10ms, no matter if there's a change in the textarea content or not. It is not necessary and CPU-friendly. The question is how can I set it to update the iframe only if there is a change in the textarea content?
7:40 pm on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Note, even if you have that if clause, it will still update every 10ms as long as the textarea has a value that is truthy (resolves to "true" when used as a boolean).

Instead, what you want to do is store the "last known value" of the textarea, and then test to see if the value is different. For example:


var lastValue = '';

function displayResult() {
if (textarea.value !== lastValue) {
lastValue = textarea.value;
iframe.open();
iframe.write(textarea.value);
iframe.close();
}
window.setTimeout(displayResult, 10);
}
6:19 am on Nov 29, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



Perfect! Thanks! :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month