由于公司项目需求,要做一个只允许输入数字、最多两位小数的输入框,其他字符直接不让输入,超出也不让输
试了很多种办法,都不能很好的满足需求,主要是键盘事件中文输入法下 都失效了,replace也不友好
最后还是决定用input type['number'] 这样可以解决大部分问题
但是这个number类型的输入框 有一些问题,可以输入字母e(中英文输入法下都可以输)、还可以输入+、-号,有点气
(后面网上 看到 原因是e在数学上代表2.71828,所以它也还是一个数字)
最纳闷的是,我在输入框里面填e和+- ,我console.log()出来这个输入框里面的内容 居然为空?
1、首先为了美观 把上下箭头去掉
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
2、要想设置number框只允许输入纯数字的话,我们在input的onkeypress的属性里设置一个按键方法,来控制允许输入的值:
(键盘事件在中文输入法下失效哦)
@keypress.native=“ if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 ||/\.\d\d{1}$/.test(val))event.returnValue=false ”
3、看到一个属性,本来以为希望了,结果不兼容chorme,吐血,不过也看看吧
ime-mode:disabled 禁止表单使用文本框输入法
ime-mode的语法:ime-mode : auto | active | inactive | disabled
取值:
auto : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled : 完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME
IME 是指 Input Method Editors 输入法编辑器
用法:
.ime-disabled{ime-mode:disabled;}/* 屏蔽输入法 */
<input type="number" name="mobile" class="ime-disabled" >
4、还有一个输入时光标位置靠上的问题
想让光标居中:让input的高度等于里面文字的高度,然后用padding把框撑起来,这样光标的高度和位置就固定了。
虽然最后也没有解决e和加减号的问题,但是也是学到了不少东西,其实在最后提交表单的时候 验证一下就好了
第一次写这种文章,想到啥写啥,有啥不好的地方,欢迎指出,以后有时间就会写一些工作中遇到的一些问题
要是有知道解决办法的,欢迎留言,非常感谢,我会持续更新的