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