如何为多个带currency类的输入框返回格式化后的印尼盾值？

问题描述 #

我设置了多个带有currency类的输入框：

<input class="form-textbox number-only currency" type="text" id="nilai1" required/>
<input class="form-textbox number-only currency" type="text" id="nilai2" required/>

已经实现了印尼盾格式化函数：

function formatRupiah(nominal){
    return new Intl.NumberFormat('id-ID',
        { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }
    ).format(nominal);
}

目前能通过按键事件在控制台输出格式化后的值，但无法将值写回当前正在输入的输入框，不知道怎么针对多个currency类输入框处理。

解决方案 #

1. 修正选择器并绑定正确事件 #

把选择器从.rupiah改成.currency以匹配你的输入框类，然后在事件回调里通过$(this)直接操作当前触发事件的输入框，将格式化后的值赋值给它。

2. 处理输入值的清理 #

格式化后的内容包含Rp.和千分位逗号，用户后续输入时，输入框的值会带有非数字字符，需要先提取纯数字再格式化，避免格式错误。

完整代码示例 #

// 格式化印尼盾函数（新增值清理逻辑）
function formatRupiah(nominal){
    // 过滤掉所有非数字字符，确保格式化的是纯数字
    const cleanNumber = nominal.replace(/[^0-9]/g, '');
    // 空值时返回空字符串，避免格式化出无效内容
    return cleanNumber ? new Intl.NumberFormat('id-ID',
        { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }
    ).format(cleanNumber) : '';
}

// 给所有currency类输入框绑定keyup事件
$('.currency').keyup(function(){
    // 获取当前输入框的原始值
    const rawValue = this.value;
    // 将格式化后的值直接赋值给当前输入框
    $(this).val(formatRupiah(rawValue));
});

优化光标位置（可选） #

上面的代码会让光标每次跳到输入框末尾，影响输入体验，可添加光标位置恢复逻辑：

$('.currency').keyup(function(){
    const inputElement = this;
    const rawValue = inputElement.value;
    // 记录光标当前位置
    const cursorPos = inputElement.selectionStart;
    const formattedValue = formatRupiah(rawValue);
    
    // 计算格式化前后的长度差，用于调整光标位置
    const lengthOffset = formattedValue.length - rawValue.length;
    
    $(this).val(formattedValue);
    // 恢复光标到输入前的相对位置
    inputElement.setSelectionRange(cursorPos + lengthOffset, cursorPos + lengthOffset);
});

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