Format user input (thousands separated by ".") while typing by using javascript-CodePudding

I'm looking to format the input of a text field while the user is typing. Format type has to be thousand separation by "." like this:

User writes: 1000

Field must show: 1.000

I managed to put this together despite my relatively limited js knowledge, but it won't format the intended way. Unless the input number is five digits long (for example 10000 shows correctly as 10.000) it won't work. Four digit numbers are still showing without the "." seperator.

http://jsfiddle.net/zt4kjrdf/1/

Tried changing input type to number in the html as well, but to no avail.

Could somebody please guide me in the right direction here?

Thanks.

$("#field-to-format").keyup(function() {
  if ($("#field-to-format").val().length == 5) {
    var my_val = $("#field-to-format").val();
    $("#field-to-format").val(Number(my_val).toLocaleString('da'));
  }
});

#field-to-format {
  font-size: 28px;
  text-align: center;
  position: absolute;
  top: 20px;
  left: 20px;
  height: 36px;
  width: 130px;
  border: 2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <input type="text" id="field-to-format" maxlength="5">
    </div>
  </div>
</div>

CodePudding user response：

You can use a simple regex.

function numberWithDots(x) {
    return x.toString().replace(/\B(?=(\d{3}) (?!\d))/g, ".");
}

The regex uses 2 lookahead assertions:

a positive one to look for any point in the string that has a multiple of 3 digits in a row after it,
a negative assertion to make sure that point only has exactly a multiple of 3 digits. The replacement expression puts a dot there.

CodePudding user response：

Complicated solution You could do something like this:

$("#field-to-format").keyup(function($("#field-to-format")) {
    return $("#field-to-format").toString().replace(/\B(?<!\.\d*)(?=(\d{3}) (?!\d))/g, ".");
}

Already implemented solutions

Use Number.prototype.toLocaleString which is implemented in JavaScript

var my_val = $("#field-to-format").val();
console.log(my_val.toLocaleString());

Or if you dont want string but number you can do this:

var my_val = $("#field-to-format").val();
let new_number = new Intl.NumberFormat('en-US');
new_number.format(my_val);

Easy solution

If you just remove the if loop (if ($("#field-to-format").val().length == 5) {)

in your snippet just copy paste this over your code:

$("#field-to-format").keyup(function() {
    var my_val = $("#field-to-format").val();
    $("#field-to-format").val(Number(my_val).toLocaleString('da'));
});

It will work for 1.000 as it is and as you wanted but then also enable larger input :D

EDIT

Since the author of post wanted further explanation :

First of all that is beacouse its on key up so it triggers very often thus changing 1.000 into a decimal 1,000. Secondly it doesnt go over 5 digits since you have it limited in text input so remove that then you can try either of this 2 codes (js):

$("#field-to-format").change(function() {
    var my_val = $("#field-to-format").val();
    $("#field-to-format").val(Number(my_val).toLocaleString('da'));
});


$("#field-to-format").change(function() {
    var my_val = $("#field-to-format").val();
    $("#field-to-format").val(String(my_val).replace(/\B(?<!\.\d*)(?=(\d{3}) (?!\d))/g, ","));
});

and in html change it to this :

<div >
  <div >
    <div >
      <input type="Text" id="field-to-format">
    </div>
  </div>
</div>