Number input field: detect special cases "+" and "-"

Question

While using some javascript, I have noticed that if there is a "-" (or "+") in a number input field, if I call the .value function on it, the value returned will be "" (undefined)!

I can understand where it came from: this way, the value returned will be a consistent number all the time, function like this that returns the string "-" (or "+") will cause troubles.

However, in my implementation, I want to detect this scenario. Is there any way that I can differentiate the inputs "" (undefined) and "-" (or "+") in an <input type="number"/> field using JavaScript? maybe with something with jQuery instead?

Below you can see a small example of the scenario I'm talking about. Thanks in advance!

function updatevaluefield() {
  value_span = document.getElementById("value_field");
  input = document.getElementById("input");
  
  value_span.innerHTML = input.value;

}

function updateinputvalue() {
  input = document.getElementById("input");
  input.value = "-";
  
  updatevaluefield();
}

<input id="input" type="number" value="123"/>
<button onclick="updateinputvalue()">Set input field to "-"</button><br/>

<br/><br/>

The value of the input field is: <span id="value_field"></span> <br/>
<button onclick="updatevaluefield()">Show value (update)</button>

Number inputs [reject non numerical entities](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number). You can set the number to be negative, but you can't have other characters like - or +. I'd use a text input and add in the functionality you're looking for yourself. — Adam Neuwirth, Jun 30 '20 at 22:03
Does this answer your question? [Only allow Numbers in input Tag without Javascript](https://stackoverflow.com/questions/12533508/only-allow-numbers-in-input-tag-without-javascript) — Geuis, Jun 30 '20 at 22:05

Twisty · Answer 1 · 2020-06-30T23:59:36.817

Consider the following.

function updatevaluefield() {
  var value_span = document.getElementById("value_field");
  var input = document.getElementById("input");
  value_span.innerHTML = input.value;
}

function updateinputvalue() {
  var input = document.getElementById("input");
  console.log(typeof input.value, input.value);
  var n = parseInt(input.value);
  if (n > 0) {
    n = 0 - n;
  } else if(n < 0) {
    n = Math.abs(n);
  }
  input.value = n;
  updatevaluefield();
}

<input id="input" type="number" value="123" />
<button onclick="updateinputvalue()">Toggle Input</button><br/>

<br/><br/> The value of the input field is: <span id="value_field"></span> <br/>
<button onclick="updatevaluefield()">Show value (update)</button>

Input elements return a String type, even if they are type='number' with HTML5. So if we cast it back to an integer, we can perform Math on it better. This method also prevents the User from passing in strange characters.

parseInt() will treat "1" and "-1" as expected. 1 and -1 respectively.

console.log(parseInt("0123"));
console.log(parseInt("-123"));
console.log(parseInt("+123"));

Number input field: detect special cases "+" and "-"

1 Answers1