Textbox that allows values -9999 to 9999

Question

Hello this is what I have right now to allow only numbers and a max of 4 digits. How would I make it so that I can allow a - before the number which would bypass the max 4 digit limit? Currently if I use a - only 3 numbers can be entered after, while I need to make it allow 4 numbers.

// Only Numbers can be Entered
function fNumOnly(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if ((charCode >= 48 && charCode <= 57) || charCode == 45) {
    return true;
  }
  return false;
}

<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" maxlength="4" />

you can try `/^(-)?(\d){0,4}$` regex in pattern `^` assert the position at start and `$` assert the position at end `(-)?` is used to match `-` 0 or 1 times `(\d){0,4}` is used to match digits i.e `0-9` between 0 to 4 times — Aayush Sharma, Dec 01 '18 at 15:20
@AayushSharma That doesn't limit the input to 4 digits though? I can type as many as I want, and if I use maxlength with that I end up with the same problem i have currently — Shadow Zero, Dec 01 '18 at 15:26
Possible duplicate of [HTML text input allows only numeric input](https://stackoverflow.com/questions/469357/html-text-input-allows-only-numeric-input) — stealththeninja, Dec 01 '18 at 15:43
@ShadowZero it should limit the input to 4 digits according to [Regex101.com](https://regex101.com/r/BKrSWJ/1) — Aayush Sharma, Dec 03 '18 at 05:44

score 6 · Answer 1 · edited Dec 01 '18 at 15:24

6

Why not use <input type="number"> with min and max values? For example:

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

<div>Enter a number between -9999 and 9999 (green for valid entry, red for invalid entry)</div>
<input type="number" name="num" min="-9999" max="9999" required>

edited Dec 01 '18 at 15:24

AndrewL64

15,794
8
47
79

answered Dec 01 '18 at 15:21

benvc

14,448
4
33
54

Point regarding cross browser compatibility: `` compatibility is "unknown" for the Edge browser. I just tested this snippet in Edge and it works fine, but you would have to test the use of this type of element in the context of whatever was being developed to be sure. – benvc Dec 01 '18 at 15:28
Yeah, bizarrely it looks like this was still an issue [last month](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/110895/) – Andy Dec 01 '18 at 15:29
1

I actually tried this previously, however I didn't use it because I wanted to fully restrict the input instead of just receiving an error when the input goes beyond the max/min – Shadow Zero Dec 01 '18 at 15:35
1

In that case, the answer from @Mohammad gets the job done for you. – benvc Dec 01 '18 at 15:40

cmprogram · Answer 2 · 2018-12-01T15:54:44.437

You can add an event listener to your desired button instead, and then upon firing of that event, run the specified function.

var input = document.getElementById("txtFahrenheit");
input.addEventListener("input", function() {
  if (input.value < -9999) {
    input.value = -9999;
  } else if (input.value > 9999) {
    input.value = 9999;
  }
});

<input id="txtFahrenheit" type="number" min="-9999" max="9999">

By setting the input type to number, we don't have to have code that checks for the input char. By adding max and min to it, we don't allow a user to use the up and down arrows to reach an invalid range.

The attached code however, double ensures this. If they input anything, it will immediately be reverted to the max and min values.

Without it, someone could manually type in 100000 and it would work.

Mohammad · Accepted Answer · 2018-12-01T15:49:00.003

2

You can check length of value of input using regex.

function fNumOnly(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if (
    ((charCode >= 48 && charCode <= 57) || charCode == 45) &&
    evt.target.value.match(/^-?\d{0,3}$/g)
  ) {
    return true;
  }
  return false;
}

<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" />

Also you can use type=number and min&max attribute for input instead of checking charCode in function

function fNumOnly(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if (evt.target.value.match(/^-?\d{0,3}$/g))
    return true;
  return false;
}

<input id="txtFahrenheit" type="number" onkeypress="return fNumOnly(event);" min="-9999" max="9999"/>

edited Dec 01 '18 at 15:49

answered Dec 01 '18 at 15:30

Mohammad

21,175
15
55
84

Thank you for the help. I'm trying to figure out the regex stuff and was wondering, would I add something to the end of that regex to prevent additional hyphens? – Shadow Zero Dec 01 '18 at 16:03
1

@ShadowZero So you should add new condition. http://jsfiddle.net/pdfw52yo/ – Mohammad Dec 01 '18 at 18:37

Kresimir · Answer 4 · 2018-12-01T15:39:16.327

1

You could do this:

<input id="txtFahrenheit" type="text" maxlength="4">

Then have the script:

const input = document.getElementById("txtFahrenheit");

input.addEventListener("input", () => {
  if(input.value.indexOf("-") != -1) input.maxLength = 5;
  else input.maxLength = 4;
});

This will let you type four characters in the input field, unless there is a minus among them, in which case, the max will be five characters.

edited Dec 01 '18 at 15:39

answered Dec 01 '18 at 15:24

Kresimir

777
5
20

1

Have you tried what happens when someone first add a `-` and then remove it and add a fifth number? – Asons Dec 01 '18 at 15:34
Excellent point! I need to add an else statement... Edited the answer. – Kresimir Dec 01 '18 at 15:38

score -1 · Answer 5 · answered Dec 01 '18 at 15:24

-1

Try Below:

<input id="txtFahrenheit" type="number" oninput="checkLength(this);" />

<script>

function checkLength(inp)
{

if (inp.value > 0)
{
if (inp.value.length > 4)
{
inp.value = inp.value.slice(0, 4);
}
}
else
{
if (inp.value.length > 5)
{
inp.value = inp.value.slice(0, 5);
}

}
}

</script>

answered Dec 01 '18 at 15:24

Sonal Borkar

531
1
6
12

Answer w/o an explanation is a bad one. Describe what you did and why it works. – Asons Dec 01 '18 at 15:31
@LGSon Not required always. This is small and self explanatory – Sonal Borkar Dec 01 '18 at 16:19
@LGSon you may try reread again before sharing link, ".....Any answer that gets the asker going in the right direction is helpful...." there is no such thing given on indent and as far the script works and run it is All Good! – Sonal Borkar Dec 01 '18 at 17:11

Textbox that allows values -9999 to 9999

5 Answers5