setTimeout to detect changes in a text field

**Rain Lover** · 11-27-2012 01:45 PM

I wonder why the following sample code doesn't work properly:

Code:

<!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/

**ReFreezed** · 11-27-2012 05:49 PM

Maybe because you're opening, writing to and closing the iframe 100 times per second (which seems more frequent than necessary)? However, the code does work for me just as it is in both Chrome and Firefox - when the textarea isn't empty it's value is copied and written to the iframe document.

**Rain Lover** · 11-28-2012 02:44 AM

Originally Posted by refreezed

Maybe because you're opening, writing to and closing the iframe 100 times per second (which seems more frequent than necessary)? However, the code does work for me just as it is in both Chrome and Firefox - when the textarea isn't empty it's value is copied and written to the iframe document.

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.

**Vince616** · 11-28-2012 04:44 AM

Hi bud

If you use onpropertychange for ie and oninput for everyone else you should cover most browsers

Here is an example for you:

Code:

<html>
  <head>
    <style type="text/css">
    textarea{
       width:300px;
       height:100px;
       border:1px solid #CCC;
            }
    </style>
    <script type="text/javascript">
     function addtxt(txt){
          document.getElementById("res").innerHTML=txt
                         }
    </script>
     <title>Colour run</title>
  </head>
  <body>
   <textarea id="txtarea" onpropertychange="addtxt(this.value)" oninput="addtxt(this.value)"></textarea>
   <div id="res"></div>
  </body>
</html>

I checked it out in ie firefox and opera and it works ok, it should work in chrome as well

**Rain Lover** · 11-28-2012 10:05 AM

Originally Posted by Vince616

Hi bud

If you use onpropertychange for ie and oninput for everyone else you should cover most browsers

Here is an example for you:

Code:

<html>
  <head>
    <style type="text/css">
    textarea{
       width:300px;
       height:100px;
       border:1px solid #CCC;
            }
    </style>
    <script type="text/javascript">
     function addtxt(txt){
          document.getElementById("res").innerHTML=txt
                         }
    </script>
     <title>Colour run</title>
  </head>
  <body>
   <textarea id="txtarea" onpropertychange="addtxt(this.value)" oninput="addtxt(this.value)"></textarea>
   <div id="res"></div>
  </body>
</html>

I checked it out in ie firefox and opera and it works ok, it should work in chrome as well

Thanks for the answer, but it doesn't cover IE9, which is a major browser. The oninput even is buggy in IE9: http://help.dottoro.com/ljhxklln.php

**007Julien** · 11-28-2012 03:43 PM

Add an onkeyup for Ie9 ?

Thread: setTimeout to detect changes in a text field

Thread Tools

Display

setTimeout to detect changes in a text field

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions