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

css hide specific text
hide text css-tricks
make text invisible css
css hide text but not before
ways to hide css
change value in css
hide h1 text css
css hide link text

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?

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.

Basic Link Rollover as CSS Sprite, The set height and width ensure only a portion of the sprite.png graphic is shown. The rollover shifts the position of the background image,  1 Modify this CSS mask method to allow the user to ONLY enter values between -9999999 to 9999999 Sep 25 '19 1 Vuejs - How to v-for loop on click Oct 8 '17 1 Wrapping elements in CSS Sep 22 '19

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}$">

CSS3 Transforms and Transitions, Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial. The user-select property specifies whether the text of an element can be selected. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

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}$"
>

CSS3 Transitions for Images, If both images are represented as elements in the code, you can use the same CSS clip values for each. Option 1: First Image As a CSS Background. The HTML​  imaskjs is a vanilla JavaScript input mask plugin that enables the user to enter the data in a certain format. Demo Download Tags: input mask Easy Input Mask Component In Vanilla JavaScript & Vue.js – Maska

Release notes, We revised nopCommerce caching system and moved away from Entity Framework. #4576 Display "from 1.99" instead of "1.99" for pickup in store method in should be hidden when setting is disable and be displayed only for registered users #4686 Hide "default value" input for attributes; #4707 Wrong three digit ISO  How to use CSS and SVG clipping and masking techniques Abbey Fitzgerald — November 6, 2018 SVGs are great for working on the web, and clipping and masking allow for some interesting ways to show or hide pieces of your web graphics.

Sub menu going behind the PDF using HTML OBJECT Only , Sub menu going behind the PDF using HTML OBJECT Only [duplicate] - html. (​I've stripped all css) I've already tried the following: Use wmode="transparant" as only way I know is already mentioned by #Gyum Fox - another 'mask' iframe. However you don't have to put an iframe "between" the elements - you can put  More modern references I’ve found only mention masks as being defined in SVG and referenced in CSS by ID or URL. Here’s an example two ways. The mask is defined in the SVG, and on the left, the image is within the SVG in an tag. On the right, that mask applied to an in the HTML (which only seems to work in Firefox at the moment).

[PDF] VMware AirWatch macOS Platform Guide, This guide shows administrators how to enroll devices or allow end users to The agent-based enrollment process secures a connection between macOS Enter admin username and password to install the MDM profile. You will only have to do this if multi-user device staging is also enabled for the Hide Profanity in. Masking operations with the mask-mode property set to alpha will use the image’s alpha values as the mask values. A handy example of an alpha channel is a PNG image with black and transparent areas.

Comments
  • 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 which also includes Firefox (non webkit)
  • 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.
  • I can try this, where would I make these changes? On the input field itself on the HTML? Example: <input maxlength=8 formControlName="parentsChildSupportPaid" type="text" class="form-control col-3 col-lg-12" data-hint="yes"> Where would I make the change here?
  • I've updated the answer with an exemple @ghostagent151
  • If that works for you, this is simpler than my approach :D
  • 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.
  • 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
  • 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
  • You can use the same pattern for an input field also (updated the answer).
  • 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