Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts

    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/

    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.
    Last edited by Rain Lover; 11-28-2012 at 08:23 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,925
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Help us to help you - explain what exactly is the problem and what you mean by "does not work properly".

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,253
    Thanks
    12
    Thanked 341 Times in 337 Posts
    setTimeout to detect changes in a text field
    wrong approach. there are events that trigger (e.g. "change"), if a text field changes. otherwise your setTimeout() will consume a lot of computing power.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Help us to help you - explain what exactly is the problem and what you mean by "does not work properly".
    Just updated my question.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dormilich View Post
    wrong approach. there are events that trigger (e.g. "change"), if a text field changes. otherwise your setTimeout() will consume a lot of computing power.
    The change event works only if the text field loses focus and oninput isn't reliable. For example it's buggy in IE9: http://help.dottoro.com/ljhxklln.php
    I just updated my question for more clarification.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,925
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Use onkeyup, onchange and onpaste to detect changes in the textarea.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Use onkeyup, onchange and onpaste to detect changes in the textarea.
    Do they cover all possible changes to a text field content?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,925
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Rain Lover View Post
    Do they cover all possible changes to a text field content?
    I would have thought so.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    I would have thought so.
    How about the Cut or Delete commands in the mouse context menu?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,925
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Rain Lover View Post
    How about the Cut or Delete commands in the mouse context menu?
    Try them! I would have thought that onchange would capture these.

    Why is is necessary to update the iframe so rapidly (10ms for heaven's sake!).
    Surely one second (or more) is enough.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Try them! I would have thought that onchange would capture these.
    The change event works only if the text field loses focus.

    Why is is necessary to update the iframe so rapidly (10ms for heaven's sake!).
    Surely one second (or more) is enough.
    You're right. One second is acceptable, too.
    What I'd like to do is create a timer to compare the current text field value with its value in 10 milliseconds or as you suggested 1 second before. Something like this:

    Code:
    function displayResult() {
    if (textarea.value != textarea.value.10ms.ago) {
    iframe.open();
    iframe.write(textarea.value);
    iframe.close();
    }
    window.setTimeout(displayResult, 10);
    }

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,925
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Something like this:-


    Code:
    var t2 = "";
    function displayResult() {
    var t1 = textarea.value;
    if (t1 != t2) {  // textarea has changed
    iframe.open();
    iframe.write(t1);
    iframe.close();
    }
    t2 = t1;
    window.setTimeout(displayResult, 1000);
    }

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Rain Lover (11-28-2012)

  • #13
    Regular Coder
    Join Date
    Nov 2009
    Posts
    199
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Thumbs up

    Perfect! Thanks!


  •  

    Posting Permissions

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