input type['number']输入框的一些问题

由于公司项目需求,要做一个只允许输入数字、最多两位小数的输入框,其他字符直接不让输入,超出也不让输

试了很多种办法,都不能很好的满足需求,主要是键盘事件中文输入法下 都失效了,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;}/* 屏蔽输入法 */


4、还有一个输入时光标位置靠上的问题

想让光标居中:让input的高度等于里面文字的高度,然后用padding把框撑起来,这样光标的高度和位置就固定了。


虽然最后也没有解决e和加减号的问题,但是也是学到了不少东西,其实在最后提交表单的时候 验证一下就好了

第一次写这种文章,想到啥写啥,有啥不好的地方,欢迎指出,以后有时间就会写一些工作中遇到的一些问题

要是有知道解决办法的,欢迎留言,非常感谢,我会持续更新的

你可能感兴趣的:(input type['number']输入框的一些问题)