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

如何在html输入框中输入数字时格式化数字？

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

//my modified code based on Moob answer below  //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（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); 

原生JS示例小提琴

使用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 }); 

用jQuery示例小提琴

允许小数：

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

必要的例子

Answer 2

通过其他答案的一些代码位，我创建了以下工作示例。 代码没有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(); } } } 

Answer 3

尝试这个插件它的工作非常好http://robinherbots.github.io/jquery.inputmask/

Answer 4

根据您给出的示例，您可以使用以下内容：

 $("#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完成。

这里的工作示例