SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Capture this event : typing in input field stops for more than 3s on unchanged value

    Hello,

    I'd like to capture the following event: when the user has started typing something in an input field, stopped typing for more than 3 seconds, with the value not having changed during these 3 seconds.

    It can be pure javascript or jQuery based.

    Stephane

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    At a guess, the following should do that.

    Code javascript:
    inputField.onkeypress = function () {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        if (this.value) {
            this.timer = setTimeout(promptUser, 3000);
        }
    }
    inputField.onchange = function () {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    }

    Hopefully the onchange event will also ensure that the timer gets cleared when the person clicks on something else too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    At a guess, the following should do that.

    Code javascript:
    function promptUser() {
        alert("You haven't typed anything for three seconds. What's the hold up?");
    }
     
    inputField.onkeyup = function () {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        if (this.value) {
            this.timer = setTimeout(promptUser, 3000);
        }
    }
     
    inputField.onchange = function () {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    }

    Hopefully the onchange event will also ensure that the timer gets cleared when the person clicks out of the field on something else.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the update. In fact, I've been trying to find a new angle at my UI issue.

    Indeed, I'm faced with this: how to call a javascript function when the user leaves an input field except when he clicks on an on-line keyboard.

    The page displays an on-line keyboard with some letters that the user might not have on his actual keyboard.

    When the user has the cursor in the input field, he can type in and also click on some letters of the on-line keyboard, which acts as if the user had typed in these letters.

    The on-line keyboard works fine.

    But, if I want to implement an onchange event handler on the input field, the handler is called even if the user clicks on a letter of the on-line keyboard.

    I wonder if there would not be a way, with jQuery probably, to capture the onchange event and wait to see if a click on the on-line keyboard letter has not happened, before actually firing up the validation method.

    A bit tricky.. :-)

    Stephane

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stephaneeybert View Post
    Indeed, I'm faced with this: how to call a javascript function when the user leaves an input field except when he clicks on an on-line keyboard.
    This demonstrates one way of doing it.
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Test </title>
    </head>
    <body>
    <form action = '#' >
     <input id='tf'>&lt; Monitored field<br>
     <input><br>
     <input><br>
    </form>
    <span style='border:solid 1px #000;padding:1em;line-height:2em' id='kb'><a href='#'>A</a> <a href='#'>Z</a></span> &lt; "Keyboard"
    
    <script type="text/javascript">
    
    function installHandler( obj, evt, func )
    {
      window.attachEvent ? obj.attachEvent(evt,func) : obj.addEventListener( evt.replace( /^on/i, "" ), func, false);
    }
    
    installHandler( document, 'onclick', function( evt )
    {
      var srcElem = evt.srcElement || evt.target,
          kBoard = document.getElementById( 'kb' ),
          field = document.getElementById( 'tf' );      
        
      if( srcElem === field )
        field.lastFocused = true;
      else
        if( field.lastFocused )
        {      
          while( srcElem && srcElem !== kBoard )
            srcElem = srcElem.parentNode;
         
          alert( "Keyboard" + ( srcElem ? "" : " not" ) + " clicked when leaving text field"  );       
        
          field.lastFocused = false;  
        }      
    });
    
    </script>
    </body>
    </html>
    Tab-indentation is a crime against humanity.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by stephaneeybert View Post
    I wonder if there would not be a way, with jQuery probably, to capture the onchange event and wait to see if a click on the on-line keyboard letter has not happened, before actually firing up the validation method.
    A simple way is for the onchange event to use setTimeout to trigger its function. The timeout could be just for 50ms, but even that is a small amount of time for the online keyboard to cancel that timeout event.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome ! Dominating !

    Thanks :-) Really nice.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to you Paul, really nice !

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice article, thanks whisher. I shall also use that throttle function in some other validation.

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry guys, but I'm going slowly on that one..

    Here is the current state of affairs:

    var keyboardClicked = 0;
    $('.elearning_exercise_page_keyboard').bind("click", function (event) {
    alert("Keyboard clicked");
    keyboardClicked = 1;
    });
    function getInstantFeedbackIfNoKeyboardClick(elearningQuestionId, fieldValue) {
    keyboardClicked = 0;
    alert("In getInstantFeedbackIfNoKeyboardClick");
    setTimeout(function() {
    alert("keyboardClicked: " + keyboardClicked);
    if (keyboardClicked == 0) {
    getInstantFeedback(elearningQuestionId, fieldValue);
    }
    }, 500);
    alert("After setTimeout");
    }

    ...

    $handler .= "getInstantFeedbackIfNoKeyboardClick('" . $elearningQuestion->getId() . "', document.getElementById('input_$uniqueQuestionId').value);";

    <input class='elearning_question_answer_input' type='text' name='$uniqueQuestionId' id='input_$uniqueQuestionId' size='$inputSize' maxlength='255' value='$participantAnswer' onfocus='focusElement(this);' onchange=\"$handler\" />

    But the alert "Keyboard clicked" never shows up.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by stephaneeybert View Post
    But the alert "Keyboard clicked" never shows up.
    DO you have a test page that demonstrates the problem?
    If not, you can use jsfiddle.net to come up with a temporary test page
    Last edited by paul_wilkins; Dec 19, 2011 at 16:31. Reason: .net, not .com
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    i used the jsfiddle at:

    http://jsfiddle.net/stephaneeybert/P4dYV/5/

    But in there I have trouble even calling the function from the onchange and onblur handler.

    Cheers,

    Stephane

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by stephaneeybert View Post
    But in there I have trouble even calling the function from the onchange and onblur handler.
    Your fiddle has the code in an onload event, which means that functions like getInstantFeedbackIfNoKeyboardClick() are not visible from the HTML inline attribute events.
    Use "no wrap (body)" instead and you will see better results.

    Even better than that though is to assign the onblur event from within the script itself.

    Code javascript:
    $('#input_uniqueQuestionId').blur(getInstantFeedbackIfNoKeyboardClick);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to work the way I want it now :-)

    http://jsfiddle.net/stephaneeybert/P4dYV/7/

    This jsfiddle is a good idea.

    Thanks Paul !

  16. #16
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I have a similar issue, kindly help. I need to capture the value from an input field and on blur the value has to be stored in a variable for me to write into a database. Pl find my code below, it is not storing the value i typed in the textbox.

    <html>
    <head>
    <style>

    p { color:blue; margin:8px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>


    <input type="text" id="txt_name" />

    <script type="text/javascript">
    var value = $("#txt_name").val();
    alert(value);
    </script>

    </body>
    </html>

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by rssridhar17 View Post
    I need to capture the value from an input field and on blur the value has to be stored in a variable for me to write into a database.
    Capture the input fields blur event, and put that code in there.

    Code javascript:
    $('#txt-value').blur(function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had to improve a bit the script so as to handle the case when the user leaves a field right after having clicked on a keyboard letter...

    <script type="text/javascript">
    var keyboardClicked = 0;
    var latestChangedField;
    $('.elearning_exercise_page_keyboard').bind("click", function (event) {
    keyboardClicked = 1;
    if (latestChangedField) {
    latestChangedField.focus();
    }
    });

    $(document).ready(function() {
    $('#input_$uniqueQuestionId').focus(function() {
    latestChangedField = $('#input_$uniqueQuestionId');
    });
    $('#input_$uniqueQuestionId').blur(function() {
    setTimeout(function() {
    if (keyboardClicked == 0) {
    if ("$displayInstantFeedback" > 0) {
    getInstantFeedback('$elearningQuestionId', document.getElementById('input_$uniqueQuestionId').value);
    }
    if ("$elearningAssignmentId" > 0) {
    saveLiveAssignment('$elearningAssignmentId', '$elearningQuestionId', document.getElementById('input_$uniqueQuestionId').value);
    }
    } else {
    keyboardClicked = 0;
    }
    }, 500);
    });
    });
    </script>


Tags for this Thread

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
  •