Измените этот метод маски CSS, чтобы позволить пользователю ТОЛЬКО вводить значения в диапазоне от -9999999 до 9999999

Question

Мне нужно изменить этот метод маскировки CSS, чтобы при вводе пользователем в это поле ввода они могли вводить значения только в диапазоне от -9999999 до 9999999.

Поле ввода не может иметь тип = число, оно имеетбыть типом = текст.Это был бы самый простой способ добиться этого, однако это бизнес-требование, чтобы все поля ввода выглядели одинаково.

Вот текущий метод маскирования, который необходимо изменить:

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