input输入优化

知识点

input输入优化

number类型时，input框出现数字调节器

使用了number类型的input时，input框的最右侧会出现一个上下监听，可以用鼠标点击调节数字大小。

但很多toC的页面，对样式有严格要求，很多时候并不希望出现这样一个数字调节器，下面使用css来隐藏这个按钮。

css 复制代码

/* 隐藏数字调节器 */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

number类型时，鼠标滚动会改变输入框中的值

使用了number类型的input时，当把鼠标放在input上面，再滚动滚轮时，会改变输入框中的数字。

需要添加一个监听事件，来制止。

ts 复制代码

// 当target是input框，且type为number，且是focus状态时，把滚动事件停止冒泡
document.addEventListener('wheel', function(event) {
  const target = event.target as HTMLElement;
  if (target.tagName === 'INPUT' && (target as HTMLInputElement).type === 'number' && (target as HTMLInputElement).matches(':focus')) {
    event.preventDefault()
  }
}, { passive: false })

移动端的输入框对键盘类型进行限制

移动端，尤其是苹果手机，在输入时默认会允许所有字符，比如数字、字母、汉字等等。

偶尔会出现这种情况：当输入键盘是汉字输入法，每按一个字母，之前输入的字母就会叠加出现在框中，导致输入混乱。

这时候就需要使用输入框限制一下键盘类型，限制为我们允许输入的字符类型的键盘。

使用输入框限制一下键盘类型，限制为我们允许输入的字符类型的键盘，比如下面的输入框，限制为只能输入数字。

html 复制代码

<input
  type="text"
  onfocus="this.oldValue=this.value;"
  oninput="/^([1-9]\d{0,4}|0|)(\.\d{0,4})?$/ig.test(this.value) ? this.oldValue=this.value : this.value=this.oldValue"
  placeholder="最多5位整数 + 4位小数"
  @input="e => input(e.target)"
/>

更新时间：2024/03/06 18:44:55

本页目录