javascript - Jquery - 数字格式仅在我单击输入框时才起作用

Question

我有一个格式化数字的函数。我想触发输入的数字已在新的文本框中格式化(“格式化结果”)。现在发生的情况是，当我单击新文本框时，格式函数就会格式化。我希望用户在(“输入数字”)文本框中输入一个数字，新的文本框(“格式化结果”)将具有格式化的数字。

我修改了脚本。

HTML

Enter Number: <input type="text" id="Enter_Number" ><br><br>

Format result : <input type="text" id="new_number" >

Jquery

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
    $("#new_number").blur(function(){
        this.value = addCommas(this.value.replace(',', ''));
    });

$('#Enter_Number').change(function(){
   $('#new_number').val($('#Enter_Number').val());
});

https://jsfiddle.net/saiyan10133/1to2gkc7/

Answer 1

您在 blur() 事件中给出了:

$("#new_number").change(function(){
    this.value = addCommas(this.value.replace(',', ''));
});

使其发生更改事件并触发父事件中的更改。

$('#Enter_Number').change(function(){
    $('#new_number').val($('#Enter_Number').val()).trigger("change");
});

或者更好的方法，在单个事件中添加这两个函数:

$('#Enter_Number').change(function(){
    $('#new_number').val(addCommas($('#Enter_Number').val().replace(',', ''));
});

片段

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}
$("#new_number").change(function(){
    this.value = addCommas(this.value.replace(',', ''));
});

$('#Enter_Number').change(function(){
    $('#new_number').val($('#Enter_Number').val()).trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Enter Number: <input type="text" id="Enter_Number" ><br><br>
Format result : <input type="text" id="new_number" >

fiddle :https://jsfiddle.net/t3znvt52/