www.cftea.com

实时获取值用 keyup 而非 keydown,或者 on("input")?

ITPOW2019/2/15 10:22:53

希望在用户输入每一个字的时候,就获取其输入的文字的内容,应该用 keyup,而非 keydown,因为 keydown 时,文字尚未形成。

比如打 a:

  • 按下按键时,keydown 触发,但获取不到 a。
  • 不过按键抬起来后,keyup 触发,可以获取到 a。

不过中文的话,在 Chrome 中,二者都有点问题,输入法输入未上屏之前,会将字母写在文本框中,好像不管哪种方法都会获取到这个字母,不是很爽。

不过 keydown 也并不是一无事处

  • 如果一直按着某个键 keydown 就会一直触发一直触发,比如做游戏时,用于按住方向键,游戏角色一直移动。
  • 而 keyup 只有在最后把键抬起来的时候,才会触发。

同时为了保险,我们应该还要多加一个事件获取 mouseup,以解决用户鼠标右键粘贴的行为,不过好像包括 Chrome 在内,很多浏览器并不会在鼠标右键粘贴时触发它。

所以:在 jQuery 中,我们推荐另一种用法:$(xx).on("input", functionxxx);

表示当输入内容有变化时,就立即响应,有点像以前 IE 的 onpropertychange。

注意:

  • on 的第一个参数表示响应什么事件,这里 "input" 表示输入事件。
  • input 并没有像 click 那样独立为方法,所以 $(xx).input 是错误的写法。
  • bind 也可以,不过推荐用 on。

不过这个事件不响应非文字内容的按钮,比如回车键它就不响应,要响应回车键怎么用呢?再额外写一个 keyup 吧。

 

<<返回首页<<