input输入优化

title: input输入优化 id: c2f58563a6958d9351317f4c5e58935c tags:

• 知识点 date: 2000/01/01 00:00:00 updated: 2025/03/25 15:47:05 isPublic: true --#|[分隔]|#--

input输入优化

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

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

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

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

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

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

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

// 当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 })

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

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

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

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

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

<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)"
/>