解决input number样式以及在移动端可输入字符的问题

默认在输入框最右有一个上下箭头,可以调节数字大小,如下图,
在这里插入图片描述
但是我不需要,在css中加上以下代码,让上下箭头消失

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

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

在这里插入图片描述

之后就是PC虽然只能输入数字了,但是e、+、-这些符号还是可以输入,
要想设置number框只允许输入纯数字的话,我们在input的onkeypress的属性里设置一个按键方法,来控制允许输入的值:


οnkeypress=“return (/[\d]/.test(String.fromCharCode(event.keyCode)))”
style="ime-mode:Disabled"

这样就只能输入纯数字了

还有一个问题就是,在手机打开时,依然可以输入字符,
而想要的效果是打开数字键盘,这时候,只需要在input中加入 pattern="[0-9]*"
解决input number样式以及在移动端可输入字符的问题_第1张图片

就可以完美解决了~
解决input number样式以及在移动端可输入字符的问题_第2张图片

over
——————————更新————————————
发现还是存在一些问题,修改一下代码

onkeyup = "value=value.replace(/[^\d]/g,'')"

依然使用 onkeyup 事件,有 bug ,就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母

onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应

oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题

这次用上了三重保险,暂时没有发现问题
解决input number样式以及在移动端可输入字符的问题_第3张图片

你可能感兴趣的:(前端端端端端端)