SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Detecting Change Before Blur

    I have an input field where users can input a number, and JavaScript calculates a result and displays it on the page. In order to have the best user experience, I want JavaScript to perform the calculation whenever the number in the field is changed. However, the "change" event works only when the input loses focus.

    I have added "keyup" as a second event for the calculation to be performed, which covers many cases of user input. However, this is still not perfect, because the user could paste a value into the box or change the value in some other way (i.e. clicking the up and down arrows on compatible browsers).

    Is there an event that fires whenever the value in the input changes, regardless of the focus of the input? Is there some other way to work around this problem? It seems like this would be the kind of thing that would have a thousand hits on Google, but I can't seem to find anything.

    My code:
    Code JavaScript:
    function onLoadFunc(){
    	if(document.addEventListener){
    		document.getElementById("wm_buy_amt_input").addEventListener("keyup", wbCalculateOther, false);
    		document.getElementById("wm_buy_amt_input").addEventListener("change", wbCalculateOther, false);
    	}else if(document.attachEvent){
    		document.getElementById("wm_buy_amt_input").attachEvent("onkeyup", wbCalculateOther);
    		document.getElementById("wm_buy_amt_input").attachEvent("onchange", wbCalculateOther);
    	}
    }
    HTML Code:
    <input type="number" value="0" min="0" id="wm_buy_amt_input" />
    "I haven't failed, I just found
    100,000 ways that don't work"
    — Thomas Edison

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    If you combine keyup for typing with mouseup for pasting, that should cover it I think.
    Or am I missing something?
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I added a mouseup event to the input element, and although it doesn't cover Edit Menu Pasting, it does cover the up/down buttons on HTML5 browsers. However, I had to have the function fire on a 1 ms timeout because apparently the event fires before the field is changed. (I'm using Safari 5 [WebKit 533.16] on Mac.)

    In order to cover Edit Menu Pasting, to what element would I have to add the mouseup event?
    "I haven't failed, I just found
    100,000 ways that don't work"
    — Thomas Edison

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,095
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by sffc View Post
    In order to cover Edit Menu Pasting, to what element would I have to add the mouseup event?
    People still use that? I haven't touched that menu in years!

    Anyway, I don't think there is an event for that. Maybe you could do a setInterval when the field gets focus, and check every time if the value changed, and do a clearInterval onblur of the field?
    Sounds a bit overkill, but I don't really know another way I'm afraid.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


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
  •