[ 6 posts ]

bible

  • Username: DazzlingBeing
  • Joined: Sun Jun 24, 2012 8:35 pm
  • Posts: 6
  • Offline
  • Profile

How can i halt the "valuechange" event in input or textarea?

Post Posted: Thu Jul 05, 2012 12:44 am
+0-
I hava a input Node,then set an valuechange event:
input.on("valuechange", function(e) {
//doing something to change the input new Value
var newValue = myFun(e.prevVal, e.newVal);
e.target.set("value", newValue);
}, this);
as you see above, if I set the newValue does not be same with e.newVal, then the valuechange will be always run(Infinite loop).This is a sample for the question,because I have some complex logic operation with the valuechange.
So I want to halt the valuechange event,but when I call e.halt(true),it throws a exception,actually,e.halt() then calls the e._event.halt() function, but the valuechange's e object, its _event is undefined.
How can I stop valuechange event?

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 507
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: How can i halt the "valuechange" event in input or texta

Post Posted: Thu Jul 05, 2012 8:36 pm
+0-
valuechange works by polling the value while the input has focus. So what's causing your infinite loop is that when the poller runs immediately after you set the value, it gets the value you set in there and qualifies it as different than e.newVal, and so fires the event again. GOTO 10.

What I would suggest is that you store the newVal in a data attribute on the input, and in your handler check if the data attribute is set and if it is and is equal to e.newVal, to clear the data attribute and skip setting the input value again.

See http://jsfiddle.net/ls_n/nwqTg/

Still sounds iffy, but I won't ask for details ;)

bible

  • Username: DazzlingBeing
  • Joined: Sun Jun 24, 2012 8:35 pm
  • Posts: 6
  • Offline
  • Profile

Re: How can i halt the "valuechange" event in input or texta

Post Posted: Thu Jul 05, 2012 11:20 pm
+0-
actually,the question is below:
input's original value is $0.00.If input non number character, the input value will be reset to e.prevVal.(no matter what to input,the initial e.prevVal is the $0.00)
when quickly input at the end of $0.00,maybe input is 'a' and 's'(this could be more characters but at least input two),then the infinit loop begin.
I print every eventchange's e status bellow:
1. e.prevVal=$0.00 e.newVal=$0.00a this is a illegal input,so i set the input value to e.prevVal($0.00),but the question become:
2. e.prevVal=$0.00a e.newVal=$0.00s as you see,i do set the input value to $0.00,but the
e.newVal is $0.00s.(character 'a' and 's' are i quickly inputed in the input),so the infinit loop begin:
//By the way, if i input the character slowly correspondly, the No.2 is:
//2. e.prevVal=$0.00a e.newVal=$0.00 correct valuechange
3. e.prevVal=$0.00s e.newVal=$0.00a
4. e.prevVal=$0.00a e.newVal=$0.00s
5. e.prevVal=$0.00s e.newVal=$0.00a
6. e.prevVal=$0.00a e.newVal=$0.00s
......
I guess after the operation(No.1 above), the e.prevVal don't have enough time to update to $0.00,the new input $0.00s has come,so the e.prevVal has still store the old value $0.00a

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 619
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: How can i halt the "valuechange" event in input or texta

Post Posted: Fri Jul 06, 2012 6:49 am
+0-
I think the best you can do is follow Luke's advice and use the blur event instead of valuechange.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 507
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: How can i halt the "valuechange" event in input or texta

Post Posted: Fri Jul 06, 2012 4:48 pm
+0-
It sounds like you're trying to do input filtering. In that case, subscribe to the keypress event, not the valuechange event, and do /[0-9]/.test(String.fromCharCode(e.charCode)) to see if it results in a numeric character for the input. If not, e.preventDefault(). Be careful not to prevent control or navigation characters (escape, pageUp, pageDown, enter, tab, arrows) or any keypress events with e.shiftKey, e.ctrlKey, or e.metaKey. In the latter case, you'll want to test the field value for non-numerics and strip them.

Luke Smith

YUI Contributor

  • Username: lsmith
  • Joined: Thu Aug 28, 2008 7:50 am
  • Posts: 507
  • Location: Sunnyvale
  • Twitter: ls_n
  • GitHub: lsmith
  • Gists: lsmith
  • IRC: ls_n
  • YUI Developer
  • Offline
  • Profile

Re: How can i halt the "valuechange" event in input or texta

Post Posted: Fri Jul 06, 2012 4:51 pm
+0-
juandopazo, true, blur is also required to catch mouse-based paste operations. But for real time filtering during typing, keypress is the way to go. Best to subscribe to both.
  [ 6 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum