Results 1 to 7 of 7

Thread: setTimeout to detect changes in a text field

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default 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:02 AM.

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,510
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    When I type, it prints it to the iframe.
    When I click away, if the textbox is empty it prints the default to the iframe.

    It seems to work fine... What exactly is the problem?

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by keyboard1333 View Post
    When I type, it prints it to the iframe.
    When I click away, if the textbox is empty it prints the default to the iframe.

    It seems to work fine... What exactly is the problem?
    Just updated my question for clarification.
    Note: It should work as soon as the textarea content changes, not after you make changes and click away.

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by Rain Lover View Post
    Note: It should work as soon as the textarea content changes, not after you make changes and click away.
    It does change as soon as the content changes. Are you referring to the last letter which doesn't go away until you click?
    if so:
    add the highlighted part to the code:
    Code:
                function displayResult() {
                    if (textarea.value) {
                        iframe.open();
                        iframe.write(textarea.value);
                        iframe.close();
                    }
                    if (textarea.value == '') {
                        iframe.open();
                        iframe.write('');
                        iframe.close();            
                    }
                    window.setTimeout(displayResult, 10);
                }
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by bernie1227 View Post
    It does change as soon as the content changes. Are you referring to the last letter which doesn't go away until you click?
    There's a problem with my approach that I don't know how to resolve: the iframe content gets updated every 10ms while I'd like it to refresh only if the current text field value is different from its value in 10 milliseconds 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);
    }

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Alright, this does what you want:
    Code:
    <textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>
            <iframe name="target"></iframe>
            <script>
                var beforeText = '';
                var textarea = document.getElementById('field');
                var iframe = window.target.document;
    
                function displayResult() {
                    if (textarea.value && textarea.value != beforeText) {
                        iframe.open();
                        iframe.write(textarea.value);
                        iframe.close();
                        beforeText = textarea.value;
                        alert(beforeText);                
                    }
                    window.setTimeout(displayResult, 10);
                }
    
                function getFocus() {
                    if (textarea.value == textarea.defaultValue) {
                        textarea.value = '';
                    }
                }
    
                function loseFocus() {
                    if (textarea.value == '') {
                        textarea.value = textarea.defaultValue;
                    }
                }
                displayResult();
            </script>​
    this jsfiddle demonstrates it by alerting when the function is called. Rather than changing every 10ms, it runs only if it has been updated.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. The Following User Says Thank You to bernie1227 For This Useful Post:

    Rain Lover (11-28-2012)

  8. #7
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Thumbs up

    Quote Originally Posted by bernie1227 View Post
    Alright, this does what you want:
    Code:
    <textarea id="field" onfocus="getFocus();" onblur="loseFocus();">This is some text.</textarea>
            <iframe name="target"></iframe>
            <script>
                var beforeText = '';
                var textarea = document.getElementById('field');
                var iframe = window.target.document;
    
                function displayResult() {
                    if (textarea.value && textarea.value != beforeText) {
                        iframe.open();
                        iframe.write(textarea.value);
                        iframe.close();
                        beforeText = textarea.value;
                        alert(beforeText);                
                    }
                    window.setTimeout(displayResult, 10);
                }
    
                function getFocus() {
                    if (textarea.value == textarea.defaultValue) {
                        textarea.value = '';
                    }
                }
    
                function loseFocus() {
                    if (textarea.value == '') {
                        textarea.value = textarea.defaultValue;
                    }
                }
                displayResult();
            </script>​
    this jsfiddle demonstrates it by alerting when the function is called. Rather than changing every 10ms, it runs only if it has been updated.
    Perfect! Thanks!

Similar Threads

  1. Replies: 2
    Last Post: 12-15-2010, 11:26 AM
  2. Replies: 2
    Last Post: 07-04-2010, 08:12 PM
  3. Detect text in an external site
    By apoc137 in forum HTML
    Replies: 2
    Last Post: 08-27-2008, 05:53 PM
  4. Replies: 2
    Last Post: 07-28-2008, 09:04 PM
  5. Detect Browser type and Display Text message
    By SayJumner in forum Looking for such a script or service
    Replies: 4
    Last Post: 09-25-2007, 07:46 PM

Bookmarks

Posting Permissions

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