如何格式化輸入框文本，因爲我打字它

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小提琴，它不是在我結束工作，也許是因爲我有輸入框裏面另一個onkeyup事件???

Answer 1

純JS（SANS 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

Answer 2

試試這個插件，它的工作原理相當不錯http://robinherbots.github.io/jquery.inputmask/

Answer 3

根據您所給出的例子，你可以使用這樣的事情：

$("#my_textbox").keyup(function(){ 
    if($("#my_textbox").val().length == 4){ 
     var my_val = $("#my_textbox").val(); 
     $("#my_textbox").val(Number(my_val).toLocaleString('en')); 
    } 
}); 

我用jQuery的在上面，但它可以是也用純JS完成。

工作實施例here

Answer 4

與其他答案的一些代碼位，我創建了以下工作的例子。代碼沒有jQuery，但比其他一些例子長一點。但它需要關注其他人的許多問題。

http://jsfiddle.net/kcz4a2ca/10/

代碼：

var input = document.getElementById('my_textbox'); 
var currentValue; 

input.addEventListener('input', function(event) { 
    var cursorPosition = getCaretPosition(input); 
    var valueBefore = input.value; 
    var lengthBefore = input.value.length; 
    var specialCharsBefore = getSpecialCharsOnSides(input.value); 
    var number = removeThousandSeparators(input.value); 

    if (input.value == '') { 
    return; 
    } 

    input.value = formatNumber(number.replace(getCommaSeparator(), '.')); 

    // if deleting the comma, delete it correctly 
    if (currentValue == input.value && currentValue == valueBefore.substr(0, cursorPosition) + getThousandSeparator() + valueBefore.substr(cursorPosition)) { 
    input.value = formatNumber(removeThousandSeparators(valueBefore.substr(0, cursorPosition-1) + valueBefore.substr(cursorPosition))); 
    cursorPosition--; 
    } 

    // if entering comma for separation, leave it in there (as well support .000) 
    var commaSeparator = getCommaSeparator(); 
    if (valueBefore.endsWith(commaSeparator) || valueBefore.endsWith(commaSeparator+'0') || valueBefore.endsWith(commaSeparator+'00') || valueBefore.endsWith(commaSeparator+'000')) { 
    input.value = input.value + valueBefore.substring(valueBefore.indexOf(commaSeparator)); 
    } 

    // move cursor correctly if thousand separator got added or removed 
    var specialCharsAfter = getSpecialCharsOnSides(input.value); 
    if (specialCharsBefore[0] < specialCharsAfter[0]) { 
     cursorPosition += specialCharsAfter[0] - specialCharsBefore[0]; 
    } else if (specialCharsBefore[0] > specialCharsAfter[0]) { 
     cursorPosition -= specialCharsBefore[0] - specialCharsAfter[0]; 
    } 
    setCaretPosition(input, cursorPosition); 

    currentValue = input.value; 
}); 

function getSpecialCharsOnSides(x, cursorPosition) { 
    var specialCharsLeft = x.substring(0, cursorPosition).replace(/[0-9]/g, '').length; 
    var specialCharsRight = x.substring(cursorPosition).replace(/[0-9]/g, '').length; 
    return [specialCharsLeft, specialCharsRight] 
} 

function formatNumber(x) { 
    return getNumberFormat().format(x); 
} 

function removeThousandSeparators(x) { 
    return x.toString().replace(new RegExp(escapeRegExp(getThousandSeparator()), 'g'), ""); 
} 

function getThousandSeparator() { 
    return getNumberFormat().format('1000').replace(/[0-9]/g, '')[0]; 
} 

function getCommaSeparator() { 
    return getNumberFormat().format('0.01').replace(/[0-9]/g, '')[0]; 
} 

function getNumberFormat() { 
    return new Intl.NumberFormat(); 
} 

/* From: http://stackoverflow.com/a/6969486/496992 */ 
function escapeRegExp(str) { 
    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 
} 

/* 
** Returns the caret (cursor) position of the specified text field. 
** Return value range is 0-oField.value.length. 
** From: http://stackoverflow.com/a/2897229/496992 
*/ 
function getCaretPosition (oField) { 
    // Initialize 
    var iCaretPos = 0; 

    // IE Support 
    if (document.selection) { 

    // Set focus on the element 
    oField.focus(); 

    // To get cursor position, get empty selection range 
    var oSel = document.selection.createRange(); 

    // Move selection start to 0 position 
    oSel.moveStart('character', -oField.value.length); 

    // The caret position is selection length 
    iCaretPos = oSel.text.length; 
    } 

    // Firefox support 
    else if (oField.selectionStart || oField.selectionStart == '0') 
    iCaretPos = oField.selectionStart; 

    // Return results 
    return iCaretPos; 
} 

/* From: http://stackoverflow.com/a/512542/496992 */ 
function setCaretPosition(elem, caretPos) { 
    if(elem != null) { 
     if(elem.createTextRange) { 
      var range = elem.createTextRange(); 
      range.move('character', caretPos); 
      range.select(); 
     } 
     else { 
      if(elem.selectionStart) { 
       elem.focus(); 
       elem.setSelectionRange(caretPos, caretPos); 
      } 
      else 
       elem.focus(); 
     } 
    } 
}