How to remove dot using replace javascript in input type number?

Question

How to remove dot using replace javascript in input type number ?

When i tried fill 999. into input. Why it's not remove dot . How can i do ?

<input name="test" id="iid" onKeyUp="test_fn(this.value)" type="number">

<script>
function test_fn(test_value){
 var test_value = test_value.replace(/[^0-9]+/g, "");
 document.getElementById("iid").value = test_value;
}
</script>

It works, but not until the next keystroke is entered. The reason is because the value of the input element isn't updated until some time after keyup finishes. Another problem is that if you enter two dots in a row, the whole value is emptied. — James, Aug 19 '17 at 17:48

score 2 · Answer 1 · answered Aug 19 '17 at 17:55

Perhaps you want to just not allow dots to be entered in the input field. Here's one way of doing that:

document.getElementById('iid').addEventListener('keypress', test_fn);

function test_fn(e){
  if (e.charCode == 46) e.preventDefault(); // not allowed to type .
}

<input name="test" id="iid" type="number">

Lal · Accepted Answer · 2017-08-19T18:18:27.517

See this fiddle

I don't know the reason of such a behavior. What I've done to solve such a problem is that, I will clear the contents of the input each time a key is pressed.

I've added the below given line to your Script which will reset the input each time a key is pressed.

    document.getElementById("iid").value = "";

Please see the Snippet below

function test_fn(test_value){
 var test_value = test_value.replace(/[^0-9]+/g, "");
 document.getElementById("iid").value = "";
 document.getElementById("iid").value = test_value;
}

<input name="test" id="iid" onKeyUp="test_fn(this.value)" type="number">

UPDATE

As @AssafiCohen-Arazi mentioned in his comment, this answer will prove to be incorrect if someone keeps on pressing the . key for so long. Thus, the better solution would be the one that is mentioned in @James answer above.

UPDATE 2

Found out the reason why you were getting in-stable results. It was all because your input type was number. You can just change your input type to text and your code will run perfectly.

See this fiddle

See the snippet below

function test_fn(test_value){
 var test_value = test_value.replace(/[^0-9]/g, "");
 document.getElementById("iid").value = test_value;
}

<input name="test" id="iid" onKeyUp="test_fn(this.value)" type="text">

This is a better solution, but still does not solve the problem that if you are to put in "999" and then hold down the "." button, the entire input will be erased. — Assafi Cohen-Arazi, Aug 19 '17 at 17:54
Also, you don't need this line: `document.getElementById("iid").value = "";` because you are redefining the value anyway — Assafi Cohen-Arazi, Aug 19 '17 at 18:04
I still like @James answer because it completely stops the dots from appearing while this answer only erases them on keyup — Assafi Cohen-Arazi, Aug 20 '17 at 03:50

Kurt G · Answer 3 · 2017-08-19T18:09:39.340

0

It is working fine for me, try this:

function test_fn(e){
    var charCode = e.which || e.keyCode;
 if (charCode >= 48 && charCode <= 57 || charCode >= 96 && charCode <= 105) return true;
    e.preventDefault();
}

<input name="test" id="iid" onKeyDown="test_fn(event)" type="number">

edited Aug 19 '17 at 18:09

answered Aug 19 '17 at 17:50

Kurt G

52
4

This does not work. Try putting in "999.." and it will erase the entire input – Assafi Cohen-Arazi Aug 19 '17 at 17:53
This will also stop the arrow keys, backspace, delete, etc. from working. – redburn Apr 10 '19 at 09:34

score 0 · Answer 4 · answered Aug 19 '17 at 18:00

0

<input name="test" id="iid" onKeyUp="test_fn(this.value)" type="text">

<script>
function test_fn(test_value){
 var test_value = test_value.replace(/[^0-9]+/g, "");
 document.getElementById("iid").value = test_value;
}
</script>

answered Aug 19 '17 at 18:00

Luís Felipe Caiaffa

1

score 0 · Answer 5 · answered Aug 19 '17 at 18:10

The type=number in the input field triggers a value sanitization algorithm hence you cannot get the actual value from the input field unless it's a valid floating point number.

You can work around this by using a text type (since you're already checking numeric values with the regulare expression /[^0-9]+/g

<input name="test" id="iid" onKeyUp="test_fn(this.value)" type="text">

<script>
  function test_fn(test_value) {
    var test_value = test_value.replace(/[^0-9]+/g, "");
    document.getElementById("iid").value = test_value;
  }
</script>

See also: How to get the raw value an field?

How to remove dot using replace javascript in input type number?

5 Answers5

See this fiddle