关于input type=“number“的那些事

1、maxlength属性失效

当你设置<input type="number">的maxlength属性时

<input type="number" maxlength="10"/>

你会发现这并不起效果。

1.1原因

maxlength属性是限制输入框中输入的字符长度，而<input type="number">类型的输入框只能输入数字，而不是字符，所以不生效。

1.2解决

通过js裁剪输入长度

<template>
  <input type="number" v-model="inputValue" @input="onInput"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const inputValue = ref<string>('');

const onInput = (event) => {
  // 获取输入值
  let newValue = event.target.value;

  // 如果输入长度超过 10，则截取前 10 个字符
  if (newValue.length > 10) {
    newValue = newValue.slice(0, 10);
  }

  // 更新 inputValue 的值
  inputValue.value = newValue;
}
</script>

运行结果：输入长度成功控制

2、去掉默认的步进器

当你使用<input type="number">时，你会发现输入框聚焦时，会出现步进器

<input type="number"/>

如图所示：

2.1方法

如何去掉呢？
通过css样式去除。注意：不同的浏览器需要添加相应的浏览器CSS前缀

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

去除后，和普通的input框样式一致。

3、字符输入问题

3.1支持输入的字符

你可能会发现，当你使用<input type="number">时，不仅能输入数字，竟然还能输入这些字符：

符号	说明
+	加号，表示正数
-	减号，表示负数
.	小数点
e,E	e是数学中的自然常数，约为2.178，所以在输⼊e,E的时候，输⼊框会将其看作⼀个数字。 这里还有个细节，e,E不能同时输入。

此外，它们还有一个共同点：在输入这些字符时，输入框获取的值为空

这里可以发现控制台打印了4次空字符串

3.2只允许输入数字和小数的例子

以vue3举例

<template>
  <input type="number" v-model="inputValue" @keydown="onKeyDown"/>
</template>

只允许输入数字（包括小数）

<script setup lang="ts">
  import { ref } from 'vue';
  const inputValue = ref<string>('');

  const onKeyDown = (event) => {
    const {key} = event;
    // 如果按下的是特定字符，则阻止默认行为
    if (['+', '-', 'e', 'E'].includes(key)) {
        event.preventDefault();
      }
    console.log(`inputValue.value: ${inputValue.value}`);
  }
</script>

这样就能规避这些字符带来的影响。当然组件库的校验是支持的，我测试过element-plus，它是正确的。

4、类型问题

虽然称为type="number"，可实际上得到的值却还是string类型。在使用typescript写代码的时候，我们可能想直接得到一个number类型的值。

4.1直接获得number类型的值

在vue3 中，使用v-model.number修饰符即可优雅解决

<template>
  <input type="number" v-model.number="inputValue" @input="onInput" />
</template>

执行结果正确，小数也支持。