Get invalid value from input type number

Question

I am using input type number. How can I get the value from this when its not valid. For example using type number and printing just 'e' thats not valid by itself.

I am using React but I think this question is very general.

onChange(event) {
  console.log(event.target.value) //is empty string when not using number
}

<form novalidate>
  <input type="number" onChange={this.onChange}>
</form>

You can't, `e` is allowed because it refers to exponents. you `` instead and listen to changes using the `input` event. You can allways convert for number using `parseFloat` or just the unary `+`. — Noctisdark, Oct 16 '16 at 17:23
@Noctisdark, thanks. I understand the reason i can write e in that field. The reason I need to capture is for validation message. I am creating a chat soo I need to write back exactly what the user typed. — pethel, Oct 16 '16 at 20:25
You may have already checked this one https://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field and I was trying use but this is also failed. — Harshana, Jun 24 '19 at 16:59

score 3 · Answer 1 · edited May 23 '17 at 12:33

3

According to my findings there is no solution to this specific problem.
The only way to get it is to set the input as type="text" and decide within the function about the validity:
(source: Validate decimal numbers in JavaScript - IsNumeric())

function onChange(event) {
  if(!isNaN(parseFloat(event.value)) && isFinite(event.value)){
    console.log("It's numeric: " + event.value);
  }
  else {
    console.log("It's not numeric: " + event.value);
  }
}

<input type="text" onChange="onChange(this)">

You have to call the onChange JS Function in this way onChange="onChange(this)" and use event.value instead of event.target.value in order to get the correct result.

function onChange(event) {
  console.log(event.value)
}

<form novalidate>
  <input type="number" onChange="onChange(this)">
</form>

edited May 23 '17 at 12:33

Community

1
1

answered Oct 16 '16 at 17:19

Luca Jung

1,440
11
25

2

Thanks, but no. Try to just type 'e' in your solution and blur. You will get a blank line. – pethel Oct 16 '16 at 17:28
@user874774 is it necessary to write it in reactjs? – Luca Jung Oct 16 '16 at 17:55
I should use it in react but I think this is very general problem. But i will not use jQuery or any other framework if thats the question. – pethel Oct 16 '16 at 17:57
@user874774 this is my only solution about this problem – Luca Jung Oct 16 '16 at 18:42

score 3 · Accepted Answer · answered Dec 16 '21 at 10:22

This is actually possible (at least in Chromium-based browers like Chrome and Edge), it's just a pain. You can get it via the selection interface:

const input = /*...the input...*/;
input.select();
const text = getSelection().toString();

No luck on Firefox, sadly.

Live Example:

const theInput = document.getElementById("the-input");
const theButton = document.getElementById("the-btn");

function saveSelection() {
    const selection = getSelection();
    const range = selection.rangeCount === 0 ? null : selection.getRangeAt(0);
    return range;
}

function restoreSelection(range) {
    const selection = getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

function getRawText(input) {
    const sel = saveSelection();
    input.select();
    const text = getSelection().toString();
    restoreSelection(sel);
    return text;
}

theButton.addEventListener("click", event => {
    const value = theInput.value;
    const text  = getRawText(theInput);
    console.log(`value = "${value}", but text = "${text}"`);
});

<p>
Copy some invalid numeric text (like <code>9-9</code>) and paste it into this field:
</p>
<input type="number" id="the-input">
<p>
Then click here: <input type="button" id="the-btn" value="Go">
</p>

score 0 · Answer 3 · edited Jun 24 '19 at 15:07

0

I don't really get you, but I think you're looking to get the input value. You're looking to target the value, but your tag doesn't have this attribute. In this case you need to add value ={this.state.value} to the input tag as a prop and add the new state in the constructor. this.state = {value: ''}

edited Jun 24 '19 at 15:07

Heretic Monkey

11,687
7
53
122

answered Oct 16 '16 at 17:17

Razvan Alex

1,706
2
18
21

se my comment in the answer from @Luca Jung – pethel Oct 16 '16 at 17:29

Get invalid value from input type number

3 Answers3

Linked