关于使用输入法回车后input输入框限制失效问题与解决

这个问题,是论坛上看到的,觉得挺有趣的,就记下来了,虽然中途吃个饭,好像耽误了不少时间。
看题目,估计又是懵的,这什么鬼的问题?那么就先看下代码
比如input有这么个限制 value=value.replace(/[^\d]/g,”) ,按照道理来说,它是应该只能输入数字的,其他的标点啊,中文啊,英文,一律不接受。

<input id="test" 
onKeyup="value=value.replace(/[^\d]/g,'')" 
type="text">

然而敏锐的吧友们发现了,个问题,就是在用中文输入法的时候,敲回车,是能够成功输入英文进去的。(ps:虽然你之后随便按个键他都能消失)
浏览器是chrome

那么到底是为什么会发生这种事情,如果尝试一下在onkeyup 和onkeydown中输出了一下event.keyCode,然后就会发现,在你使用输入法的过程中,onkeyup这个方法是不会被触发的,查询了下度娘之类的,有贴心的人告诉我是输入法给拦截了,而onkeydown呢,则是疯狂的输出229,但是如果你用onkeydown这个方法去获取input的内容的话,你只能获取到一片空白,也就没办法解决什么事情。
看似死循环的情况下,其实往往被大家忽略了一个方法。
oninput ,首先去粘贴一下定义。

oninput 事件在用户输入时触发。
该事件在 或 元素的值发生改变时触发。
提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。

这么一来就清晰多了,既然oninput事件是在元素值立刻发生变化的时候触发的,那就可以用来为内容增加限制,照旧是只能输入数字的限制

<input id="test"
 oninput="value=value.replace(/[^\d]/g,'')" 
 type="text">

(ps:浏览器是chrome)


这么一来,这个小毛病就解决了,撒花。

当然,方法并不只有一种…………我也只是html学习路上的一个只小菜鸟,如果大佬有什么更好的方法,欢迎给建议,目标就是每天积累一小点,总有一天熬出头┗|`O′|┛ 嗷~~

猜你喜欢

转载自blog.csdn.net/qq_38604499/article/details/81301713