修改此 CSS 掩码方法以允许用户仅输入 -9999999 到 9999999 之间的值

Question

我需要修改此 CSS 屏蔽方法，以便当用户在此输入字段中键入时，他们只能输入 -9999999 到 9999999 之间的值。

输入字段不能是type=number，必须是type=text。这是最简单的方法，但是，这是一项业务要求，所有输入字段必须看起来相同。

这里是当前需要修改的屏蔽方式：

  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];
  }

我如何修改它，使 -9999999 到 9999999 之间的任何值都有效？

Answer 1

首先，如果您因为样式问题无法使用数字输入，那么请使用

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

要禁用数字输入中的箭头，它将看起来与文本输入相同。

这是一个演示：https://jsfiddle.net/ybj8v36z/

编辑：

如果您希望对输入进行更多限制，请在将其添加到实际输入元素之前使用 JS 中的正则表达式来验证您的值：

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;
    }
});

这是一个工作演示：https://jsfiddle.net/75n1fkxa/1/

希望对您有所帮助。

Answer 2

您可以使用以下正则表达式匹配 -9999999 到 9999999 之间的数字：

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

https://regexr.com/4ln7v

相同的输入模式：

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

Answer 3

感谢大家的帮助。虽然没有具体的答案来解决我的确切问题，但您的一些回复让我找到了正确的路径。

这是我对原始方法所做的修改

在我的 TS 文件中：

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;
    }
}

在我的 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}$"
>

修改此 CSS 掩码方法以允许用户仅输入 -9999999 到 9999999 之间的值

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

css

regex

validation

angular

angular7