如何在JavaScript中格式化输入框内容并保持光标位置-js教程-PHP中文网

如何在JavaScript中格式化输入框内容并保持光标位置

花韻仙語

发布： 2025-08-15 18:50:01

原创

498人浏览过

如何在javascript中格式化输入框内容并保持光标位置

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

问题描述

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

解决方案

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

1. 创建输入框元素

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

立即学习“Java免费学习笔记（深入）”；

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

以上就是如何在JavaScript中格式化输入框内容并保持光标位置的详细内容，更多请关注php中文网其它相关文章！