偶然的机会,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 输入法编辑器