el-input-number无法过滤e、+、-、.等特殊字符

Am1nnn

已于 2024-06-27 10:43:14 修改

阅读量1.1k

点赞数 6

文章标签： vue.js 前端 javascript

于 2024-06-26 15:56:22 首次发布

本文链接：https://blog.csdn.net/am1n98/article/details/139989876

版权

1. el-input-number

el-input-number是一种特殊的输入框，用来输入数字，除了可以直接键盘输入数字外，还支持通过上↑、下↓按钮对数字进行调整。

然而，el-input-number对于输入字段的处理并不严格限制只能输入数字，而是允许用户输入一些额外的字符，比如+、-、.、e、E，这个问题在原生input事件中也会出现，原因下文介绍。

1.1. min、max指定最大、最小值

输入超过max指定值时，数值会回显为max值

输入小于min指定值时，数值会回显为min值

指定最大、最小值
<el-input-number v-model="num" :min="1" :max="10" label="请输入数量"></el-input-number>

1.2. 自定义步数step

自定义每次点击点击按钮数字变化量，即步数，如每点击加号一次，则增大3。

自定义步数
<el-input-number v-model="num" :step="3"></el-input-number>

1.3. 自定义精度precision

可以指定数据的精度。

自定义精度
<el-input-number v-model="num" :step="0.01" :precision="2"></el-input-number>

1.4. 调整按钮位置controls-position

按钮位置可以调整到输入框右侧，但是不支持调整到左侧等其他位置。

 调整按钮位置
<el-input-number v-model="num" controls-position="right"></el-input-number>

2. 无法过滤e、E、+、-、.等特殊字符

e和E

e = 2.71828，本身指的就是指数，属于数字范围

加号可用来表示正数，尽管在数字类型的输入字段中通常不必要，因为正数默认就是正的。

减号可以用来表示负数，这是有用的，因为不是所有的数字都是正数。

输入框允许用户输入数字，而数字本身包括整数和小数。很多应用场景都需要输入带有小数点的数值，自然就允许输入小数点符号。

3. keydown事件限制输入特殊字符

KeyDown：用户摁下摁键时发生。

KeyPress：用户摁下摁键，并且产生一个字符时发生。

KeyUp：用户释放某一个摁键时触发。

<el-input-number
    v-model="continueOrderForm.durationTime"
    :min="1"
    :max="60"
    :step="1"
    step-strictly
    @keydown="inputLimit"
/>

const inputLimit = (e) => {
  const key = e.key;
  const notAllowList = ['e','E','+','-','.'];
  if (notAllowList.includes(key)) {
    e.returnValue = false
    return false
  }
  return true
}

---------------------------------------------------------更新----------------------------------------------------------

再次测试发现，该方法无法拦截中文输入法下的e。

即输入法切换成中文，摁下e键，enter回车。e仍出现在输入框中，此时e.key打印为process。

解决：

使用compositionstart+compositionend限制中文输入。

4. compositionstart+compositionend限制中文输入

compositionstart

当用户使用拼音输入法开始输入汉字时，compositionstart事件就会被触发。

compositionend

当文本段落的输入完成或取消时, compositionend 事件将被触发。

  <el-input-number
    v-model="continueOrderForm.durationTime"
    :min="1"
    :max="60"
    :step="1"
    step-strictly
    controls-position="right"
    @keydown="channelInputLimit"
    @compositionstart="handleCompositionStart($event)"
    @compositionend="handleCompositionEnd($event)"
  />

// 处理中文模式输入字母e
let value = ''
const handleCompositionStart = (e: any) => {
  console.log(e.target.value) // 输入框原有的值
  value = e.target.value
}
const handleCompositionEnd = (e: any) => {
  console.log(e.target.value) // 识别为空字符串
  e.target.value = value
  continueOrderForm.durationTime = value
}

5. input和change事件的区别

input事件

在输入框输入的时候，会实时响应并触发。

change事件

在输入框失去焦点 + 输入框的值发生变化的时候才会触发。

它和 blur事件略有不同，blur事件是每次失去焦点时触发，不管输入框数据有没有变化。

6. input事件监听el-input-number失效

对于无法过滤特殊字符的情况，曾经思考使用监听input事件来替换输入字符。

但是发现input事件不仅会将输入的特殊字符一律识别为null，还存在无法实时监听的情况，且在input事件里手动修改v-model的绑定值也不生效。

<el-input-number
    v-model="continueOrderForm.durationTime"
    :min="1"
    :max="60"
    :step="1"
    step-strictly
    @input="onInput"
/>

let refNumber = ref(null)
function onInput(value) {
  console.log(value) //对于特殊字符识别为 null
  if(value === null){  // 该方法不严谨，因为输入框为空时，value也识别为null
      continueOrderForm.durationTime = 1 //重置为1
  }
  console.log(refNumber.value)
}

此外，对于input无法实时监听的问题，还考虑过网上的其他方法，如获取输入框的实时的值displayValue，并重新复制给绑定的对象。

试验发现该方法也不生效，el-input-number节点上没有displayValue这个属性，可能在vue2中这个思路是可行的。

如下：用ref绑定el-input-number，在input事件里用节点的displayValue重新赋值给绑定值。

<el-input-number
    v-model="continueOrderForm.durationTime"
    ref="refNumber"
    :min="1"
    :max="60"
    :step="1"
    step-strictly
    @input="onInput"
/>

let refNumber = ref(null)
function onInput(value) {
  console.log(refNumber.value) // Object
  console.log(refNumber.value.displayValue) //不存在displayValue这个属性
  // continueOrderForm.durationTime = refNumber.value.displayValue //重新赋值
}