javascript - 如何在输入时格式化输入框文本

Question

如何在 html 输入框中输入数字时设置其格式？

例如，我想输入数字 2000，当我输入第 4 位数字时，文本(当前显示在文本框中)将自动格式化为 2,000(带逗号)。

//my modified code based on Moob answer below

<input type="text" class="formattedNumberField" onkeyup="myFunc()">

//jQuery
$(".formattedNumberField").on('keyup', function(){
    var n = parseInt($(this).val().replace(/\D/g,''),10);
    $(this).val(n.toLocaleString());
});

function myFunc(){
// doing something else
}

虽然这段代码如 Moob Fiddle 中所示完美运行，但在我这边不起作用可能是因为我在输入框内有另一个 onkeyup 事件？？？

Answer 1

纯 JS(无 jQuery):

var fnf = document.getElementById("formattedNumberField");
fnf.addEventListener('keyup', function(evt){
    var n = parseInt(this.value.replace(/\D/g,''),10);
    fnf.value = n.toLocaleString();
}, false);

Native JS Example Fiddle

使用 jQuery:

$("#formattedNumberField").on('keyup', function(){
    var n = parseInt($(this).val().replace(/\D/g,''),10);
    $(this).val(n.toLocaleString());
    //do something else as per updated question
    myFunc(); //call another function too
});

With jQuery Example Fiddle

允许小数:

$("#formattedNumberField").on('keyup', function(evt){
    if (evt.which != 110 ){//not a fullstop
        var n = parseFloat($(this).val().replace(/\,/g,''),10);
        $(this).val(n.toLocaleString());
    }
});

Obligatory Example