input不能输入空格解决方法

最近发现页面中一个有suggest功能的input不能输入空格(这个input的suggest功能用到了bootstrap的dropdown功能),但是可以输入其他的字符,非常奇怪,我自己的js代码里面根本没有对输入做过任何的处理,而且输入空格时文本框中的内容没有任何变化。

只能猜测可能是其他的js中对所有的dropdown功能的input都做了按键监听和屏蔽。

无耐之下,用排除法,一个个的把页面中引入的js移除,查看输入框能否输入空格,经测试发现当删除了bootstrap的js引入后,input就可以输入空格了,说明问题在bootstrap.js里面,所以进到源码里面看了看,发现版本是v3.3.0,因此试试最新的版本v3.3.2,替换最新的版本后,恢复正常了。然后用svn的diff功能看了下两个版本源码中的区别,发现v3.3.2中修复了v3.3.0中的这个bug,增加了一个判断条件把文本框类型的控件过滤掉了。如下图:

bootstrap的bug:input不能输入空格

bootstrap的bug:input不能输入空格

参考ASCII表,空格的ascii码是32,还有三个按键也被屏蔽了,分别是:&、(、escape键。v3.3.0中的代码可以看到,如果是空格、&、(、escape键这4个按键中的任何一个,则执行:

e.preventDefault()
e.stopPropagation()

也就是说如果按的是上面的4个按键中的任何一个,就阻止这个事件的默认行为,所以文本框中的内容没有变化。v3.3.2版本中增加了一个控件tagName的判断,如果是input或者textarea就不做上面的阻止行为。这样正好解决了问题。

结论是:bootstrap v3.3.0里面的bug,bootstrap升级到最新的3.3.2就可以了。

原创文章:input不能输入空格解决方法,转载请注明:转载自戎码一生

Post Footer automatically generated by wp-posturl plugin for wordpress.



好书推荐:Java Web开发实战