javascript - setTimeout to detect changes in a text field

Question

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.

score 1 · Accepted Answer

"Let me give an example: enter a sentence into the text field. Then select/highlight it. Now press the 'Delete' button on your keyboard. You won't see the same thing on the iframe"

The problem is this line:

if (textarea.value) {

If textarea is blank, i.e., the .value is an empty string, then the if condition is falsy and the copy to the iframe doesn't happen. Just remove the if.

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

(Note that this was the only case where I was able to duplicate your problem that changes were not reflected in the iframe.)

score 0 · Accepted Answer

why are you "polling" for changes? just append a keyup-handler (which notifies you when someone has typed into your textarea-field)

textarea.onkeyup = function() {
    // do whatever you want to do here
}

score 0 · Accepted Answer

reconsider your implementation, here is simple sample with jquery, but surely it might be done on any other lib or even core JS

http://jsbin.com/oraxeb/1

Just think about such improvements like:

not every keyUp should works, for example Ctrl or arrows or shift or bunch or others, that's will improve performance
initial default text - quite simple
probably something else)

javascript - setTimeout to detect changes in a text field

3 回答 3

Related

Reference