如何为输入框字段添加连字符，且退格删除时避免循环卡顿

问题1：任意位置添加连字符且退格可正常删除 #

以下是原生JavaScript实现方案，支持自定义连字符插入规则（示例为每3个字符插入一个连字符，可按需修改），同时处理退格键直接删除连字符的逻辑：

<input type="text" id="hyphenInput" placeholder="输入内容自动加连字符">

<script>
const input = document.getElementById('hyphenInput');
let lastValue = '';

input.addEventListener('input', function(e) {
  // 先移除所有现有连字符，避免重复处理
  let value = e.target.value.replace(/-/g, '');
  let newValue = '';
  
  // 自定义连字符插入规则：每3个字符添加一个连字符
  for (let i = 0; i < value.length; i++) {
    if (i > 0 && i % 3 === 0) {
      newValue += '-';
    }
    newValue += value[i];
  }
  
  // 处理删除场景：若当前内容长度缩短且以连字符结尾，移除末尾连字符
  if (newValue.length < lastValue.length && newValue.endsWith('-')) {
    newValue = newValue.slice(0, -1);
  }
  
  // 记录并恢复光标位置，避免输入时光标跳转
  const cursorPosition = e.target.selectionStart;
  const lengthDiff = newValue.length - lastValue.length;
  e.target.value = newValue;
  e.target.setSelectionRange(cursorPosition + lengthDiff, cursorPosition + lengthDiff);
  
  lastValue = newValue;
});

// 监听退格键，直接删除光标前的连字符
input.addEventListener('keydown', function(e) {
  if (e.key === 'Backspace') {
    const cursorPos = e.target.selectionStart;
    if (cursorPos > 0 && e.target.value[cursorPos - 1] === '-') {
      e.target.value = e.target.value.slice(0, cursorPos - 1) + e.target.value.slice(cursorPos);
      e.target.setSelectionRange(cursorPos - 1, cursorPos - 1);
      e.preventDefault();
    }
  }
});
</script>

关键逻辑说明： #

• 每次输入先清除所有连字符，再按规则重新构建带连字符的内容，避免重复插入
• 记录光标位置并动态调整，保证输入体验流畅
• 退格键单独处理，当光标前是连字符时直接删除，无需触发input事件的重新构建

问题2：分块添加连字符，避免删除文本时陷入循环 #

针对类似44251-4548453-5的分块格式，通过定义分块长度实现精准控制，同时解决删除时的循环问题：

<input type="text" id="blockHyphenInput" placeholder="示例格式：44251-4548453-5">

<script>
const input = document.getElementById('blockHyphenInput');
// 定义分块长度数组，对应示例的5位、7位、1位，可按需修改
const blockLengths = [5, 7, 1];
let lastValue = '';

input.addEventListener('input', function(e) {
  let value = e.target.value.replace(/-/g, '');
  let newValue = '';
  let currentIndex = 0;
  
  // 按分块长度拼接内容，仅在块间添加连字符
  for (let len of blockLengths) {
    if (currentIndex >= value.length) break;
    const chunk = value.slice(currentIndex, currentIndex + len);
    newValue += chunk;
    currentIndex += len;
    // 非最后一块且还有剩余内容时，添加连字符
    if (currentIndex < value.length && len !== blockLengths[blockLengths.length - 1]) {
      newValue += '-';
    }
  }
  
  // 处理删除循环：若内容缩短且以连字符结尾，移除末尾连字符
  if (newValue.length < lastValue.length && newValue.endsWith('-')) {
    newValue = newValue.slice(0, -1);
  }
  
  // 调整光标位置
  const cursorPosition = e.target.selectionStart;
  const lengthDiff = newValue.length - lastValue.length;
  e.target.value = newValue;
  e.target.setSelectionRange(cursorPosition + lengthDiff, cursorPosition + lengthDiff);
  
  lastValue = newValue;
});

// 退格键直接删除连字符
input.addEventListener('keydown', function(e) {
  if (e.key === 'Backspace') {
    const cursorPos = e.target.selectionStart;
    if (cursorPos > 0 && e.target.value[cursorPos - 1] === '-') {
      e.target.value = e.target.value.slice(0, cursorPos - 1) + e.target.value.slice(cursorPos);
      e.target.setSelectionRange(cursorPos - 1, cursorPos - 1);
      e.preventDefault();
    }
  }
});
</script>

关键逻辑说明： #

• 通过blockLengths数组精准定义每块的字符长度，完全匹配需求格式
• 仅在块与块之间添加连字符，避免不必要的插入
• 删除时检测内容长度变化，若末尾是连字符则直接移除，防止因重新构建内容导致的循环添加问题

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