两个textbox输入时同步值，如何让第二个textbox忽略自动添加的逗号

DevOps 小满

2026-10-22

解决方案

你已经封装好了可提取纯数字的getNumber工具函数，直接复用该函数即可实现需求，核心调整包含两点：

修改textbox1同步到textbox2的赋值逻辑，把textbox1的值传入getNumber过滤千分位逗号等非数字字符后再赋值
补充双向同步逻辑：textbox2输入时自动把纯数字值传给textbox1，触发千分位格式化

完整代码

HTML部分（无需修改）

<input type="text" value="" id="textbox1"/>
<input type="text" value="" id="textbox2"/>

JavaScript部分

// 千分位格式化函数
function updateTextView(_obj){
    var num = getNumber(_obj.val());
    if(num==0){
        _obj.val('');
    }else{
        _obj.val(num.toLocaleString());
    }
}
// 提取纯数字工具函数
function getNumber(_str){
    var arr = _str.split('');
    var out = new Array();
    for(var cnt=0;cnt<arr.length;cnt++){
        if(isNaN(arr[cnt])==false){
            out.push(arr[cnt]);
        }
    }
    return Number(out.join(''));
}
$(document).ready(function(){
    // textbox1输入自动加千分位
    $('#textbox1').on('keyup',function(){
        updateTextView($(this));
    });
    // textbox1同步到textbox2：自动过滤逗号
    $("#textbox1").bind('input', function () {
        var pureNum = getNumber($(this).val());
        $("#textbox2").val(pureNum ? pureNum : '');
    });
    // 双向同步：textbox2输入时同步更新textbox1
    $("#textbox2").bind('input', function () {
        var pureNum = getNumber($(this).val());
        $("#textbox1").val(pureNum ? pureNum.toLocaleString() : '');
    });
});