移动端响应式下input绑定keyup实现千位分隔符时字符重复报错如何解决

架构老林

2026-10-4

移动端输入框千位分隔符异常修复方案

问题根因

移动端软键盘触发keyup事件时，event.which固定返回0，原有方向键拦截逻辑完全失效
keyup事件无法覆盖移动端粘贴、自动补全、联想输入等场景的输入值变更，会出现值重复拼接的问题
移动端部分输入法会在输入过程中插入临时字符，原有正则替换逻辑处理时会出现误判

修复方案

换用H5标准input事件替代keyup，input事件会在输入值发生任何变更时触发，兼容全端所有输入场景，同时补充光标位置修复逻辑，避免输入时光标自动跳转到末尾的体验问题。

修复后完整代码

HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="number">

JS代码

$('input.number').on('input', function(event) {
  // 保存当前光标位置
  const cursorPos = this.selectionStart;
  // 统计替换前光标前的逗号数量，用于后续修正光标偏移
  const prevCommaCount = (this.value.slice(0, cursorPos).match(/,/g) || []).length;

  $(this).val(function(index, value) {
    // 过滤所有非数字字符
    const pureNumber = value.replace(/\D/g, '');
    if (!pureNumber) return '';
    // 生成带千位分隔符的结果
    return pureNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  });

  // 修正替换后的光标位置
  const newCommaCount = (this.value.slice(0, cursorPos).match(/,/g) || []).length;
  const newCursorPos = cursorPos + (newCommaCount - prevCommaCount);
  this.setSelectionRange(newCursorPos, newCursorPos);
});