Cannot get raw value from (including dot(.)) from HTML input type number

Question

When I click on the input <input type="number" id="n" /> ; type some key on keypress function of the input. Then typing . though it display on the input but I cannot get see . in $('#n').val().

For example after typing: 123. Then $('#n').val() only return 123.

Is there any attribute of <input type="number" /> that I can get its raw value which is 123. rather than 123?

$("#n").on("keypress", function(event) {
  console.log($("#n").val());
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<input type="number" pattern="[0-9]{1,2}([\.][0-9]{1,2})?" id="n" step="0.01" />

JSbin demo

UPDATE:

input MUST have type number to allow it to showing number input only on softkeyboard on mobile web.
It should check for pattern 99.99 and work as below:
1. When type 9 OK // input: 9
2. type 9 OK // input: 99
3. type 9 NO, it not match pattern // input: 99
4. Then type 1 NO, it not match pattern // input: 99
5. ..Free type typing anything rather than dot(.) here...
6. type dot(.) OK // input: 99.
7. type 9 OK // input: 99.9
8. type 9 OK // input: 99.99
9. type 9 NO // input: 99.99

Without detect the existance dot(.) how can I detect the case of typing multiple . consecutively ?

@Satpal: `keyup` doesn't work https://jsbin.com/korofateji/1/edit?html,js,console,output — o0omycomputero0o, Apr 11 '17 at 12:47
`123.` is `123`, why do you need the period? Doubt you will get it since there is no real way to get the raw value out. — epascarello, Apr 11 '17 at 12:47
@epascarello: because I wanna use this info to constraint input number when each time. I.e: only allow 1 number after dot(.) 123.4 - so must detect of the existence of the `.` — o0omycomputero0o, Apr 11 '17 at 12:49
So the . will be there after they add one number. Issue you have is input numbers parses it for you so you have no control. You can listen to key events and see what the value is, but not reading the value. — epascarello, Apr 11 '17 at 12:50
Its a XY problem, May be [this](https://stackoverflow.com/questions/21796827/jquery-allow-only-two-numbers-after-decimal-point) can help — Satpal, Apr 11 '17 at 12:50
So @o0omycomputero0o your only option is really, not use number input. — epascarello, Apr 11 '17 at 12:56
Still not sure why it is a big deal with not having the decimal. Just like how when the user enters in 123.0, you will get out 123 since there are no significant digits. Only way around this would be to use a text input and build the step functionality yourself. — epascarello, Apr 11 '17 at 12:57
*"typing multiple . consecutively"* Reading the value will not return a number when the input is not correct. — epascarello, Apr 11 '17 at 13:17

score 0 · Answer 1 · answered Apr 11 '17 at 12:51

0

I've myself faced this issue earlier. Maybe this can help:

$("#n").on("keyup", function(event){
  var val = $('#n').val();
  if(event.keyCode == 190) {
    val+='.';
  }
  console.log(val);
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<input type="number" id="n" />
</body>
</html>

answered Apr 11 '17 at 12:51

mehulmpt

15,861
12
48
88

only issue would fail in cases of paste, delete key – epascarello Apr 11 '17 at 12:54
Sorry, but how to keep track the dot(.) after editing operation .i.e remove the dot(.) then add again....like @epascarello mentioned above. – o0omycomputero0o Apr 11 '17 at 12:55
@o0omycomputero0o once you've got the dot in place, you can just split the string and check if the length of part after decimal is 2 or not – mehulmpt Apr 11 '17 at 12:56
@epascarello i'll see – mehulmpt Apr 11 '17 at 12:56

score 0 · Answer 2 · answered Apr 11 '17 at 13:00

0

<input type="number"
       min="0"
       max="999"
       step="0.000001"
       pattern="[0-9]{1,2}([\.][0-9]{1,2})?" 
       id="n" />

This Should Solve your problem. Use FocusOut event to capture the value

answered Apr 11 '17 at 13:00

Krishna9960

529
2
12

@epascarello : For me its working. Here is the fiddle link https://jsfiddle.net/o2gxgz9r/5444/ I tested in Safari Browser. – Krishna9960 Apr 12 '17 at 08:23

score 0 · Answer 3 · answered Jun 24 '21 at 15:43

In order to get a value from input with type numeric, when value ends with a dot, you need to use a hacky solution that requires you to listen to 'onKeyUp' event. This behavior is intentional since numeric input should only return valid numbers.

Here is my implementation of described solution:

const resultContainer = document.querySelector("#result");
let value = null;

const updateValue = (event) => {
  const DOT_KEY_CODE = 190;
  const BACKSPACE_KEY_CODE = 8;

  let newValue = event.currentTarget.value;
  if (newValue === "" || newValue === null) {
    if (event.keyCode === DOT_KEY_CODE) {
      newValue = value.toString() + ".";
    } else if (event.keyCode === BACKSPACE_KEY_CODE) {
      const valueParts = value.toString().split(".");
      const DECIMAL_PART = 1;
      const decimalPlaces = valueParts.length > 1 ? valueParts[DECIMAL_PART].length : 0;
      const LAST_DECIMAL_PLACE = 1;
      if (decimalPlaces === LAST_DECIMAL_PLACE) {
        const REMOVE_ONE_CHAR = 1;
        newValue = value.toString().substring(0, value.toString().length - REMOVE_ONE_CHAR);
      }
    }
  }

  value = newValue;
  resultContainer.innerHTML = newValue;
};

<input type="number" onKeyUp="updateValue(event)" />
<div>Received value: <span id="result"></span></div>

Cannot get raw value from (including dot(.)) from HTML input type number

3 Answers3