setTimeout to detect changes in a text field

This site is best viewed in a modern browser with JavaScript enabled.

setTimeout to detect changes in a text field

Rain_Lover

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/

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.

Rain_Lover

refreezed;1236971 wrote:
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

Hi bud

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

Here is an example for you:

<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

Vince616;1237081 wrote:
Hi bud

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

Here is an example for you:
<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

Add an onkeyup for Ie9 ?