JavaScript实现输入数字时替换文本框中的下划线

可以通过监听输入框的输入事件，过滤非数字字符并动态拼接字符串来实现这个需求，以下是具体的实现方案：

代码实现 #

HTML部分

创建一个输入框，初始值设为带括号和下划线的格式：

<input type="text" id="numberInput" value="(_________)" maxlength="11">

注：maxlength设为11是因为括号占2位，9个下划线占9位，总长度11，避免输入超出格式范围

JavaScript部分

编写逻辑处理输入，实现数字逐个替换下划线：

const input = document.getElementById('numberInput');
const placeholderUnderscores = '_________'; // 初始下划线的数量
const maxDigits = placeholderUnderscores.length;

// 监听输入事件
input.addEventListener('input', function() {
    // 移除括号，提取原始输入内容
    let rawContent = this.value.replace(/[()]/g, '');
    // 只保留数字字符，过滤其他输入
    let validDigits = rawContent.replace(/\D/g, '');
    // 限制数字长度不超过下划线的数量
    validDigits = validDigits.slice(0, maxDigits);
    // 计算剩余需要保留的下划线
    const remainingUnderscores = placeholderUnderscores.slice(validDigits.length);
    // 重新拼接成带括号的目标格式
    this.value = `(${validDigits}${remainingUnderscores})`;
});

// 优化聚焦体验：默认状态下聚焦时光标定位到第一个下划线位置
input.addEventListener('focus', function() {
    if (this.value === `(${placeholderUnderscores})`) {
        this.setSelectionRange(1, 1);
    }
});

功能说明 #

• 仅允许输入数字：通过replace(/\D/g, '')过滤所有非数字字符，确保输入内容合规
• 自动替换下划线：输入的数字会依次替换前面的下划线，剩余未输入的位置保持下划线
• 支持删除操作：当删除数字时，下划线会自动补回到对应的位置
• 光标定位优化：首次聚焦时光标自动跳到第一个可输入位置，提升用户体验

内容的提问来源于stack exchange，提问作者Fuad Mammadov