homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
setTimeout to detect changes in a text field
Rain_Lover



 
Msg#: 4523008 posted 7:41 pm on Nov 27, 2012 (gmt 0)

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 ]

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4523008 posted 8:34 pm on Nov 27, 2012 (gmt 0)

Seems to be working in the fiddle you provided... can you elaborate? What isn't it doing that you think it should be?

Rain_Lover



 
Msg#: 4523008 posted 9:00 pm on Nov 27, 2012 (gmt 0)

The iframe content is supposed to get updated in real time, as soon as the textarea content changes.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4523008 posted 9:20 pm on Nov 27, 2012 (gmt 0)

That's exactly what I see. Tried it in Chrome, Firefox, and IE9.

Rain_Lover



 
Msg#: 4523008 posted 7:53 am on Nov 28, 2012 (gmt 0)

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);
}

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4523008 posted 1:59 pm on Nov 28, 2012 (gmt 0)

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.

Rain_Lover



 
Msg#: 4523008 posted 4:16 pm on Nov 28, 2012 (gmt 0)

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?

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4523008 posted 7:40 pm on Nov 28, 2012 (gmt 0)

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);
}

Rain_Lover



 
Msg#: 4523008 posted 6:19 am on Nov 29, 2012 (gmt 0)

Perfect! Thanks! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved