在 javascript 表单输入时实时格式化内容，最直接的做法是监听 input 事件并在回调中修改 value。通过正则表达式匹配目标模式（如手机号、金额），替换为格式化后的字符串并重新赋值给 input.value。需要注意的是，直接赋值会改变光标位置，因此必须记录输入前的光标位置，并在赋值后恢复，否则用户无法连续输入中间字符。
input 事件如何捕获并处理非标准字符
使用 addEventListener('input', ...) 可以捕获所有导致 value 变化的操作，包括键盘输入、粘贴和拖拽。在处理逻辑中，先提取原始值中的数字或特定符号，过滤掉其他干扰字符，再按固定长度插入分隔符。例如将连续的 11 位数字格式化为每 3-4-4 段的手机号样式。此过程必须在 DOM 更新前计算好新值和光标偏移量，确保交互流畅。
const phoneInput = document.getElementById('phone');
phoneInput.addEventListener('input', function(e) {
let value = e.target.value;
// 移除所有非数字字符
const numbers = value.replace(/\D/g, '');
// 限制长度为 11 位
const limitedNumbers = numbers.slice(0, 11);
// 格式化：12345678901 -> 123 4567 8901
let formatted = '';
if (limitedNumbers.length > 3) {
formatted += limitedNumbers.slice(0, 3) + ' ';
if (limitedNumbers.length > 7) {
formatted += limitedNumbers.slice(3, 7) + ' ';
formatted += limitedNumbers.slice(7);
} else {
formatted += limitedNumbers.slice(3);
}
} else {
formatted = limitedNumbers;
}
// 保存光标位置
const cursorPos = e.target.selectionStart;
const oldLength = value.length;
const newLength = formatted.length;
e.target.value = formatted;
// 恢复光标位置
// 如果删除了字符，光标可能需要调整
let newCursorPos = cursorPos;
if (newLength > oldLength) {
newCursorPos += (newLength - oldLength);
} else {
newCursorPos = Math.max(0, cursorPos + (newLength - oldLength));
}
e.target.setSelectionRange(newCursorPos, newCursorPos);
});
上述代码定义了 phoneInput 元素的事件监听器。当用户输入时，replace(/\D/g, '') 清除非数字内容。接着根据长度分段添加空格。关键步骤是计算 cursorPos 的变化量，通过 setSelectionRange 保持光标在正确位置，避免格式化导致的光标跳变问题。
如何处理粘贴包含格式字符的剪贴板内容
当用户从外部复制带有空格的手机号（如 123 4567 8901）并粘贴到输入框时，input 事件同样会触发。此时 e.target.value 包含已格式化的内容。处理逻辑需保持一致：先清洗数据，再重新格式化。由于粘贴可能一次性插入多个字符，光标位置的计算需基于插入前后的长度差。若粘贴内容包含非法字符（如字母），清洗步骤会自动剔除，确保最终显示符合规范。对于金额等需要小数点的场景，需额外验证小数点位置和位数，防止出现 12.34.56 等错误格式。
const amountInput = document.getElementById('amount');
amountInput.addEventListener('input', function(e) {
let value = e.target.value;
// 移除非数字和非小数点字符
let cleaned = value.replace(/[^0-9.]/g, '');
// 只保留第一个小数点
const parts = cleaned.split('.');
if (parts.length > 2) {
cleaned = parts[0] + '.' + parts.slice(1).join('');
}
// 限制小数点后两位
if (parts.length === 2 && parts[1].length > 2) {
cleaned = parts[0] + '.' + parts[1].slice(0, 2);
}
// 添加千分位分隔符
const integerPart = parts[0];
const decimalPart = parts.length > 1 ? '.' + parts[1] : '';
const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const formatted = formattedInteger + decimalPart;
const cursorPos = e.target.selectionStart;
const oldLength = value.length;
const newLength = formatted.length;
e.target.value = formatted;
// 简单的光标恢复逻辑
let newCursorPos = cursorPos;
if (newLength > oldLength) {
newCursorPos += (newLength - oldLength);
} else {
newCursorPos = Math.max(0, cursorPos + (newLength - oldLength));
}
e.target.setSelectionRange(newCursorPos, newCursorPos);
});
该示例展示了金额输入的格式化逻辑。replace(/[^0-9.]/g, '') 过滤非法字符。通过 split('.') 分离整数和小数部分，确保只有一个小数点且最多两位小数。整数部分使用正则 /\B(?=(\d{3})+(?!\d))/g 插入千分位逗号。光标恢复逻辑与手机号示例相同，确保粘贴长串数字时光标不会跳到末尾。此方法适用于大多数数值型字段的实时格式化需求。
格式化后光标位置异常的具体原因与修正
在实时格式化过程中，最常见的问题是用户输入中间字符时光标突然跳到末尾。这是因为 value 赋值后，浏览器默认将光标置于字符串末尾。修正方法是在赋值前记录 selectionStart，计算新旧字符串长度的差值，并将该差值加到原光标位置上。如果用户删除了字符，差值为负，光标应向前移动。对于复杂格式（如日期 YYYY-MM-DD），插入分隔符会导致后续字符索引偏移，需更精确地计算每个字符的新位置。基本策略是：记录旧光标，应用格式化，计算长度变化，调整新光标。若格式化涉及大量字符重排，可考虑使用 document.execCommand（已废弃）或现代库如 imask.js 来处理光标管理。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
