www.webdeveloper.com
Results 1 to 6 of 6

Thread: setTimeout to detect changes in a text field

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    setTimeout to detect changes in a text field

    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/

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  3. #3
    Join Date
    Nov 2009
    Posts
    80
    Quote Originally Posted by refreezed View Post
    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.

  4. #4
    Join Date
    Jan 2010
    Posts
    80
    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

  5. #5
    Join Date
    Nov 2009
    Posts
    80
    Quote Originally Posted by Vince616 View Post
    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

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    Add an onkeyup for Ie9 ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles