HTML表单如何实现输入格式化？怎样自动添加分隔符？

pattern

inputmode

<input type="text" id="cardNumber" placeholder="请输入银行卡号" maxlength="19">

input

document.getElementById('cardNumber').addEventListener('input', function(e) {
    const input = e.target;
    let value = input.value;
    const initialCursorPos = input.selectionStart; // 记录光标原始位置

    // 1. 清除所有非数字字符，这是为了确保我们只处理纯数字
    let cleanValue = value.replace(/\D/g, '');

    // 2. 根据规则添加分隔符 (例如，每4位添加一个空格)
    // 这是一个简单的例子，实际可能需要更复杂的逻辑来处理不同长度的卡号
    let formattedValue = '';
    for (let i = 0; i < cleanValue.length; i++) {
        formattedValue += cleanValue[i];
        if ((i + 1) % 4 === 0 && i !== cleanValue.length - 1) {
            formattedValue += ' ';
        }
    }

    // 3. 更新输入框的值
    input.value = formattedValue;

    // 4. 关键：调整光标位置以提供流畅的用户体验
    // 这一步比较复杂，需要根据格式化前后的长度变化来重新计算光标位置
    let newCursorPos = initialCursorPos;
    const oldLength = value.length;
    const newLength = formattedValue.length;

    // 如果新值比旧值长（通常是添加了分隔符），我们需要调整光标位置
    if (newLength > oldLength) {
        // 粗略判断光标是否在分隔符前
        const addedSpaces = (newLength - oldLength); // 增加了多少个字符
        newCursorPos += addedSpaces;
    } else if (newLength < oldLength) {
        // 如果新值比旧值短（通常是删除了字符），可能需要微调
        // 这里简化处理，实际可能更复杂
        newCursorPos = initialCursorPos; // 尝试保持原位
    }

    // 确保光标不会超出字符串长度
    newCursorPos = Math.min(newCursorPos, newLength);

    // 设置光标位置
    input.setSelectionRange(newCursorPos, newCursorPos);

    // 思考：在提交表单时，我们可能需要的是没有格式的纯数字。
    // 所以，在表单提交前，需要再次清除格式，或者在后端处理。
    // 这也是为什么客户端格式化通常只为了用户体验，而不是数据存储的最终格式。
});

setSelectionRange

type="tel"

type="number"

pattern

inputmode

type

type="tel"

type="number"

12345678

12,345,678

pattern

pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}"

1234

1234-

inputmode

numeric

decimal

email

type

setSelectionRange

input

input.value

// ... (之前的代码)
const input = e.target;
let value = input.value;
const initialCursorPos = input.selectionStart;

// 假设这是格式化前的纯净值长度
const initialCleanValueLength = value.replace(/\D/g, '').length;

// ... 执行格式化，得到 formattedValue 和 cleanValue ...

input.value = formattedValue;

// 计算新的光标位置
let newCursorPos = 0;
// 遍历原始光标位置之前的字符，计算有多少个分隔符被添加了
let addedCharsBeforeCursor = 0;
for (let i = 0; i < initialCursorPos; i++) {
    // 假设我们只关心原始输入字符串中，在光标位置之前有多少个非数字字符（分隔符）
    // 这可能需要更精细的逻辑，比如模拟格式化过程来计算
    if (value[i] && !/\d/.test(value[i])) { // 如果是分隔符
        addedCharsBeforeCursor++;
    }
}

// 假设我们简单地认为光标位置应该随着非数字字符的插入而向后移动
// 这种方式对于简单的插入是有效的
newCursorPos = initialCursorPos + (formattedValue.length - value.length);

// 确保光标不会超出字符串长度
newCursorPos = Math.min(newCursorPos, formattedValue.length);
// 确保光标不会是负数
newCursorPos = Math.max(0, newCursorPos);

input.setSelectionRange(newCursorPos, newCursorPos);
// ... (end of example)