SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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,840
    Mentioned
    25 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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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 Addict
    Join Date
    Dec 2010
    Posts
    226
    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
  •