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

Posted 2023-04-19

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

试了很多种办法，都不能很好的满足需求，主要是键盘事件中文输入法下 都失效了，replace也不友好

最后还是决定用input type['number'] 这样可以解决大部分问题

但是这个number类型的输入框 有一些问题，可以输入字母e（中英文输入法下都可以输）、还可以输入+、-号，有点气

（后面网上 看到  原因是e在数学上代表2.71828，所以它也还是一个数字 ）

最纳闷的是，我在输入框里面填e和+- ，我console.log（）出来这个输入框里面的内容 居然为空？

1、首先为了美观 把上下箭头去掉

2、要想设置number框只允许输入纯数字的话，我们在input的onkeypress的属性里设置一个按键方法，来控制允许输入的值：

（键盘事件在中文输入法下失效哦）

@keypress.native=“ if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 ||/\.\d\d1$/.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-disabledime-mode:disabled;/* 屏蔽输入法 */

<input type="number" name="mobile" class="ime-disabled" >

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

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

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

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

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

input type=number去掉上下箭头

<input type="number" ...>

<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>

　　如上即可实现在 input[type="number1"] 情况下取消那两个不好看的箭头了