如何移除整数编辑输入框中的逗号分隔符？

原生JavaScript场景 #

直接监听输入框的input事件，实时过滤掉输入内容里的逗号，同时处理光标位置避免跳转：

const input = document.getElementById('integer-input');

input.addEventListener('input', function(e) {
  // 保存当前光标位置
  const cursorPos = this.selectionStart;
  // 去除所有逗号
  const newValue = this.value.replace(/,/g, '');
  // 计算光标需要调整的偏移量
  const offset = this.value.length - newValue.length;
  
  this.value = newValue;
  // 重置光标位置，抵消逗号删除带来的偏移
  this.selectionStart = this.selectionEnd = cursorPos - offset;
});

Vue框架场景 #

可以通过自定义指令或者监听v-model值的变化来实现：

方法1：自定义指令

<template>
  <input v-model="numberValue" v-remove-comma />
</template>

<script>
export default {
  data() {
    return {
      numberValue: ''
    };
  },
  directives: {
    removeComma: {
      update(el) {
        const cursorPos = el.selectionStart;
        const newValue = el.value.replace(/,/g, '');
        const offset = el.value.length - newValue.length;
        
        el.value = newValue;
        el.selectionStart = el.selectionEnd = cursorPos - offset;
      }
    }
  }
};
</script>

方法2：watch监听值变化

<script>
export default {
  data() {
    return {
      numberValue: ''
    };
  },
  watch: {
    numberValue(newVal) {
      this.numberValue = newVal.replace(/,/g, '');
    }
  }
};
</script>

React框架场景 #

使用受控组件，在onChange事件中处理输入值：

import { useState } from 'react';

function IntegerInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    const cursorPos = e.target.selectionStart;
    const newValue = e.target.value.replace(/,/g, '');
    const offset = e.target.value.length - newValue.length;
    
    setValue(newValue);
    // 延迟设置光标位置，确保DOM更新后生效
    setTimeout(() => {
      e.target.selectionStart = e.target.selectionEnd = cursorPos - offset;
    }, 0);
  };

  return <input type="text" value={value} onChange={handleChange} />;
}

export default IntegerInput;

额外提示 #

• 表单提交前建议再做一次全局替换，避免遗漏：const cleanValue = inputValue.replace(/,/g, '');
• 若使用type="number"输入类型，部分浏览器可能仍会自动添加分隔符，上述方法依然适用。

内容的提问来源于stack exchange，提问作者Kasun98