input中 type=number 的文本框（数字框） 去掉箭头 且不能输入e和标点符号

偶然的机会，PM看我写的页面，然后我自己随便输入一个值的时候，发现number框可以输入“e”,"...",出于好奇去网上查了一下，发现这点是可以控制的，html如下：

<div class="layui-form-item">
                <label class="layui-form-label">可容纳人数</label>
                <div class="layui-input-block">
                    <input type="number" autocomplete="off" class="layui-input" id="txtPersonNumber">
                    <span class="filederror"></span>
                </div>
            </div>

默认是这样的效果：

然后我们先来控制这个箭头不显示，在css里加上这些样式：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}

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

 <div class="layui-form-item">
                <label class="layui-form-label">可容纳人数</label>
                <div class="layui-input-block">
                    <input type="number" autocomplete="off" class="layui-input" id="txtPersonNumber" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled">
                    <span class="filederror"></span>
                </div>
            </div>

 

这样设置以后再去看就只允许输入数字了，而且输入该值的时候输入法是禁用的，不允许调，如果还需要设置它的最大最小值，可以在max和min属性里设置，最后总结一些ime-model的语法：

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 输入法编辑器