jQuery-數字格式僅在我單擊輸入框時有效

Question

我有一個格式化數字的函數。 我想觸發輸入的數字，該文本已經在文本框的新文本框中格式化（“格式化結果”）。 現在發生的是，當我在新的文本框中單擊時，即格式化功能已格式化。 我希望用戶在（“ Enter Number”）文本框中輸入數字，而新的textbox（“ Format result”）將具有格式化的數字。

我把腳本弄得一團糟。

的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" > 

小提琴： https : //jsfiddle.net/t3znvt52/

Answer 2

您可以在用戶輸入回車號時使用keyup設置新號碼，並直接將addCommas調用到輸入的值：

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

工作小提琴

Answer 3

我已經更新了您的小提琴代碼來解決您的問題，使用諸如change input blur事件

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

小提琴在這里