SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Howdy,

    You need to pass a function to setTimeOut.

    In other words, change this:
    Code JavaScript:
    window.setTimeout(displayResult, 10);

    to this:
    Code JavaScript:
    window.setTimeout(function(){displayResult()}, 10);

    and things will work as expected.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,598
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pullo View Post
    Howdy,

    You need to pass a function to setTimeOut.

    In other words, change this:
    Code JavaScript:
    window.setTimeout(displayResult, 10);

    to this:
    Code JavaScript:
    window.setTimeout(function(){displayResult()}, 10);

    and things will work as expected.

    Both of those code samples are passing a function to setTimeout - just the one the OP is using is shorter than your replacement as it calls the function directly instead of ccalling an anonymous function that then calls the function.

    I can't see exactly where the problem is but suspect it probably relates to the iframe part of the code.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    The OP seems to have the demo working now if you look at the Fiddle.
    I can't work out what's different though.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    179
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    I can't see exactly where the problem is but suspect it probably relates to the iframe part of the code.
    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.


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
  •