How to format input box text as I type it

Question

How do I format a number when entering it in the html input field?

so, for example, I want to enter the number 2000, when I type the 4th digit, the text (which is currently displayed in the text box) will be automatically formatted to 2000 (with a comma).

//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 } 

while this code works fine, as shown in Moob Fiddle, it does not work at my end, perhaps because I have another onkeyup event inside the input window.

Answer 1

Pure 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); 

Original JS Script Example

With 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 }); 

Using jQuery Script Example

To allow decimal places:

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

Mandatory example

Answer 2

With some bits of code for the other answers, I created the following working example. Code without jquery, but slightly longer than some other examples. But he cares about many problems that others have.

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

code:

 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

Try this plugin, it works pretty well http://robinherbots.imtqy.com/jquery.inputmask/

Answer 4

Based on the example you provided, you can use something like this:

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

I used jQuery in the above, but this can be done with pure JS as well.

Working example here