Modify this CSS mask method to allow the user to ONLY enter values between -9999999 to 9999999

Question

I need to modify this CSS masking method so that when the user types in this input field, they can only enter values between -9999999 to 9999999.

The input field cannot be type=number, it has to be type=text. This would be the easiest way to go about this, however, this is a business requirement, that all input fields must look the same.

Here is the current masking method that needs to be modified:

  maskInputAmount(e) {
    const t = e.target.value.replace(/\[a-z]/g, '').match(/(-?)(\d{0,8})/);
    e.target.value = t[2] ? (t[1] + t[2]) : t[2];
  }

How can I modify this so that any value -9999999 to 9999999 is valid?

If the business requirement is _"all input fields must look the same"_ that does _**not**_ say that you _must_ use input `type="text"`. If the stated business requirement is, in fact, that you must use `type=text`, well, that has no business being a business requirement. I like Call_in's approach: use the Right Thing and change its appearance - which may have been derived from an [older answer](https://stackoverflow.com/a/4298216/17300) which also includes Firefox (non webkit) — Stephen P, Sep 26 '19 at 00:51
Call_in's response is the closest thing to an answer I've found. The only issue is that they dont want the user to be able to enter any characters other than integers and a - sign in the first position. Yes, there is a pattern I can add for validation, but thats not how the business wants the application developed. — ghostagent151, Sep 26 '19 at 02:06

Call_in · Accepted Answer · 2019-09-26T12:38:53.463

2

First if you can't use number inputs because of the styling then use

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

To disable the arrows in a number input it will then look the same as text inputs.

Here is a demo : https://jsfiddle.net/ybj8v36z/

EDIT:

If you want more restrictions on your input use a regex in JS to validate your value before adding it to the actual input element:

let myInput = document.getElementById("my-input");
let myInputValue = myInput.value;
let regex = new RegExp(/(^\-?[0-9]{0,11}$)/);

myInput.addEventListener("input", (e)=>{
    e.preventDefault();
    if (regex.test(myInput.value))
    {
      console.log("Change value " + myInputValue + " to " + myInput.value);
      myInputValue = myInput.value;
    } 
    else 
    {
      myInput.value = myInputValue;
    }
});

Here is a working demo : https://jsfiddle.net/75n1fkxa/1/

Hope it helps.

edited Sep 26 '19 at 12:38

answered Sep 25 '19 at 23:05

Call_in

66
5

I can try this, where would I make these changes? On the input field itself on the HTML? Example: Where would I make the change here? – ghostagent151 Sep 25 '19 at 23:12
I've updated the answer with an exemple @ghostagent151 – Call_in Sep 25 '19 at 23:25
If that works for you, this is simpler than my approach :D – mulsun Sep 25 '19 at 23:29
Its close but does not work correctly. The - sign can only come in the first position of the input field. In the jsfiddle you have, I'm able to place the - sign anywhere in the input field. – ghostagent151 Sep 26 '19 at 00:44
1

If you want to add restriction you will have to check the key inputs in JS before adding them to your input's value you can't do that in CSS/HTML Only @ghostagent151 – Call_in Sep 26 '19 at 07:17
I've updated my answer with something that is more like you want @ghostagent151 – Call_in Sep 26 '19 at 11:34
This looks like a good solution, my application is in Angular, so its using typescript. I'll try to modify your jsfiddle code so that it is compatible with my application and will let you know the result – ghostagent151 Sep 26 '19 at 23:38

mulsun · Answer 2 · 2019-09-25T23:19:11.633

1

You can match the numbers between -9999999 to 9999999 with the following regex:

regex: `^\-?[0-9]\d{0,6}$`

https://regexr.com/4ln7v

Same pattern for an input:

<input type="text" pattern="^-?[0-9]\d{0,6}$">

edited Sep 25 '19 at 23:19

answered Sep 25 '19 at 23:07

mulsun

563
5
15

The regex is fine, the challenge is masking the input field, so that the user can ONLY enter a negative sign in the first position, and ONLY enter integers after that. OR only enter integers – ghostagent151 Sep 25 '19 at 23:11
You can use the same pattern for an input field also (updated the answer). – mulsun Sep 25 '19 at 23:20
For that pattern, if I put it in the input field, it will only allow positive integers and for negative integers, only a negative followed by only 0's, for example: -0000 – ghostagent151 Sep 26 '19 at 03:43

score 0 · Answer 3 · answered Sep 27 '19 at 00:46

Thanks everyone for the help. Though there wasnt a specific answer to solve my exact problem, some of your responses led me to the correct path.

Here is what I've done to modify my original method

In my TS file:

conditionalLength;

maskInputAmount(e) {
  const myInput = document.getElementById('my-input') as HTMLInputElement;
  let myInputValue = myInput.value;
  const regex = new RegExp(/(^\-?[0-9]{0,11}$)/);

  const positiveOrNot = myInputValue.split('');
  if (positiveOrNot[0] === '-') {
    this.conditionalLength = true;
  }

  if (positiveOrNot[0] !== '-') {
    this.conditionalLength = false;
  }


  e.preventDefault();
  if (regex.test(myInput.value)) {
      console.log('Change value ' + myInputValue + ' to ' + myInput.value);
      myInputValue = myInput.value;
    } else {
      myInput.value = myInputValue;
    }
}

In my HTML:

<input 
  type="text" 
  (input)="maskInputAmount($event)"
  [attr.maxlength]="conditionalLength === true ? 8 : 7"
  id="my-input"
  formControlName="parents2017AdjustedGrossIncome" 
  class="form-control col-3 col-lg-12" 
  data-hint="yes"
  pattern="^-?[0-9]\d{0,6}$"
>

Modify this CSS mask method to allow the user to ONLY enter values between -9999999 to 9999999

3 Answers3