JS格式化输入框内容并保持光标位置

本文介绍了一种使用JavaScript格式化输入框内容并保持光标位置的有效方法，解决了Web开发中常见的输入体验问题。在需要对输入框内容进行格式化（例如每隔五位字符插入空格）时，简单格式化会导致光标跳至末尾，影响用户体验。针对此问题，本文详细阐述了如何通过监听`input`和`keydown`事件，结合正则表达式进行文本格式化，并精确控制光标位置，确保用户在输入或删除时获得流畅的操作体验。通过示例代码，开发者可以轻松实现输入框内容的格式化，例如电话号码、信用卡号等，同时避免光标跳动问题，显著提升用户体验。

本文介绍如何使用JavaScript格式化输入框中的文本，使其每隔五个字符插入一个空格，并解决在输入或删除时光标自动跳到末尾的问题。通过监听input和keydown事件，精确控制文本格式化和光标位置，提供流畅的用户体验。

问题描述

在Web开发中，有时需要对输入框中的内容进行格式化，例如，将一长串字符每隔固定位数插入空格，以提高可读性。一个常见的需求是每五个字符插入一个空格。然而，简单地使用input事件来格式化输入框的值，会导致一个问题：当用户在输入框中间进行输入或删除操作时，光标会自动跳到文本的末尾，影响用户体验。

解决方案

要解决这个问题，需要同时监听input和keydown事件，并精确控制文本格式化和光标位置。

1. 创建输入框元素

首先，创建一个输入框元素，并设置其样式：

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";

2. 定义格式化函数

定义一个函数formatValue，用于格式化输入框的值，使其每五个字符插入一个空格：

function formatValue(value) {
  return value.replace(/\s*/g, "").replace(/(.{5})/g, "$1 ").trim();
}

这个函数首先移除所有空格，然后使用正则表达式/(.{5})/g匹配每五个字符，并在其后添加一个空格。最后，使用trim()方法移除字符串首尾的空格。

3. 监听input事件

监听input事件，在每次输入框的值发生变化时，格式化文本并调整光标位置：

Input.addEventListener("input", function(e) {
  const cursorPosition = Input.selectionStart;
  const oldValue = Input.value
  Input.value = formatValue(Input.value);

  const newPosition = oldValue.length < Input.value.length ? cursorPosition + 1 : cursorPosition
  Input.setSelectionRange(newPosition, newPosition);
});

在input事件处理函数中，首先获取当前光标的位置cursorPosition。然后，调用formatValue函数格式化输入框的值。最后，使用Input.setSelectionRange(newPosition, newPosition)方法设置光标的位置，保持光标在输入或删除操作后的正确位置。

4. 监听keydown事件

监听keydown事件，处理Backspace和Delete键的删除操作，并精确控制光标位置：

Input.addEventListener("keydown", function(e) {
  let cursorPosition = Input.selectionStart;
  let value = Input.value;

  if (e.key === 'Backspace') {
    e.preventDefault();
    if (cursorPosition === 0) return

    const offset = Input.value[cursorPosition - 1] === ' ' ? 2 : 1;

    value = value.slice(0, cursorPosition - offset) + value.slice(cursorPosition);

    Input.value = formatValue(value);
    Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);

  } else if (e.key === 'Delete') {
    e.preventDefault();
    if (cursorPosition >= value.length) return

    const offset = Input.value[cursorPosition] === ' ' ? 2 : 1
    value = value.slice(0, cursorPosition) + value.slice(cursorPosition + offset);

    Input.value = formatValue(value);
    Input.setSelectionRange(cursorPosition, cursorPosition);

  }
});

在keydown事件处理函数中，首先判断按下的键是否是Backspace或Delete。如果是，则阻止默认行为，手动处理删除操作。

对于Backspace键，如果光标不在文本的开头，则计算需要删除的字符数（如果光标前是空格，则删除两个字符，否则删除一个字符），然后使用slice方法删除字符。最后，调用formatValue函数格式化输入框的值，并使用Input.setSelectionRange方法将光标移动到正确的位置。

对于Delete键，如果光标不在文本的末尾，则计算需要删除的字符数（如果光标后是空格，则删除两个字符，否则删除一个字符），然后使用slice方法删除字符。最后，调用formatValue函数格式化输入框的值，并使用Input.setSelectionRange方法将光标保持在原来的位置。

5. 添加到文档

最后，将输入框元素添加到文档中：

document.body.appendChild(Input);

完整代码

let Input = document.createElement("input");
Input.setAttribute("type", "text");
Input.style.width = "100%";
Input.style.height = "30px";
Input.style.fontSize = "20px";

function formatValue(value) {
  return value.replace(/\s*/g, "").replace(/(.{5})/g, "$1 ").trim();
}

Input.addEventListener("input", function(e) {
  const cursorPosition = Input.selectionStart;
  const oldValue = Input.value
  Input.value = formatValue(Input.value);

  const newPosition = oldValue.length < Input.value.length ? cursorPosition + 1 : cursorPosition
  Input.setSelectionRange(newPosition, newPosition);
});

Input.addEventListener("keydown", function(e) {
  let cursorPosition = Input.selectionStart;
  let value = Input.value;

  if (e.key === 'Backspace') {
    e.preventDefault();
    if (cursorPosition === 0) return

    const offset = Input.value[cursorPosition - 1] === ' ' ? 2 : 1;

    value = value.slice(0, cursorPosition - offset) + value.slice(cursorPosition);

    Input.value = formatValue(value);
    Input.setSelectionRange(cursorPosition - 1, cursorPosition - 1);

  } else if (e.key === 'Delete') {
    e.preventDefault();
    if (cursorPosition >= value.length) return

    const offset = Input.value[cursorPosition] === ' ' ? 2 : 1
    value = value.slice(0, cursorPosition) + value.slice(cursorPosition + offset);

    Input.value = formatValue(value);
    Input.setSelectionRange(cursorPosition, cursorPosition);

  }
});

document.body.appendChild(Input);

总结

通过监听input和keydown事件，并精确控制文本格式化和光标位置，可以解决在格式化输入框内容时光标自动跳到末尾的问题，提供流畅的用户体验。这种方法可以应用于各种需要格式化输入框内容的场景，例如，格式化电话号码、信用卡号等。

到这里，我们也就讲完了《JS格式化输入框内容并保持光标位置》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！