символы в поле - PullRequest
Новая
       1

символы в поле

0 голосов
/ 04 декабря 2018

Я провел много исследований по этому вопросу и до сих пор не могу найти хорошее решение.По сути, у меня есть это поле в моей форме, которое должно ТОЛЬКО разрешать числа.Тем не менее, я могу ввести mac специальные символы внутри этого поля, выполнив:

Удерживая нажатой option + shift и затем нажимая любуюкнопка с клавиатуры (пример: hjklui и т. д.).

Пожалуйста, см. Прикрепленное изображение.

Может ли кто-нибудь помочь мне НЕ допускать такие символы в поле идентификатора?Заранее большое спасибо!

Вот мой код:

LIVE DEMO 

ID: <input formControlName="userid" type="text" pKeyFilter="num" placeholder="Numbers" pInputText>

Ответы [ 4 ]

0 голосов
/ 12 декабря 2018

Что ж, если вы ищете ответ регулярного выражения (на основе вашего тега), вы можете проверить длину значения перед регулярным выражением в зависимости от длины значения после регулярного выражения.если есть дополнительные символы, длины не будут совпадать. 

[0-9]+
0 голосов
/ 09 декабря 2018

Есть много подходов к этой проблеме.Все предоставленные решения должны работать.Моя рекомендация - Подход 2.

Подход 1

Вы можете попытаться удалить нечисловые символы в событии ввода, как это 

<input 
    formControlName="userid"
    type="text"
    placeholder="Numbers"
    oninput="javascript: this.value = this.value.replace(new RegExp('[^0-9]', 'gm'), '')"
    pInputText
/>

Модифицированная демоверсия

Я проверил это в Firefox и Chrome на MacOS, и, похоже, он работает нормально.

Подход 2

Ксделайте это из своего углового модуля:

Используйте простой текстовый ввод 

<input
    formControlName="userid"
    type="text"
    placeholder="Number"
    pInputText
/>

Прослушайте изменения и исправьте значение соответствующим образом.Не забудьте зарегистрировать своих наблюдателей на init. 

registerChangeObservers() {
    this.registrationFormGroup.get("userid").valueChanges.subscribe(val => {
      this.registrationFormGroup.patchValue({
        'userid': val.replace(new RegExp('[^0-9]', 'gm'), '')
      }, { emitEvent: false });
    });
  }

ngOnInit() {
    this.registerChangeObservers();
  }

Особенно обратите внимание на часть { emitEvent: false }.Вы должны установить это, чтобы избежать рекурсии.Этот подход может потерпеть неудачу, если ваша модель станет недействительной и, следовательно, ее значение изменится на ноль.Например, это может произойти, если вы установите тип ввода на число, но пользователю удастся ввести нецифровый символ.Чтобы избежать этого, убедитесь, что проверка ввода не завершается ошибкой для специальных символов, например, путем установки типа ввода для текста.

Демонстрация здесь

Подход 3

Чтобы избежать отображения изменяющихся символов, вы также можете прослушивать входные события (например, нажатия клавиш) вместо фактических изменений значений.Это эквивалентно подходу 1. Для этого используйте этот вход 

<input
    formControlName="userid"
    type="text"
    placeholder="Number" 
    pInputText
    (input)="onPress($event)"
/>

и добавьте эту функцию в свой контроллер 

onPress($event) {
    this.registrationFormGroup.patchValue({
        'userid': $event.target.value.replace(new RegExp('[^0-9]', 'gm'), '')
      }, { emitEvent: false });
  }

Демонстрация 3

Примечание: я бы вообще избегал такого подхода, потому что по моему опыту подавление изменения символов может иметь непреднамеренные побочные эффекты с некоторыми необычными методами ввода, особенно на мобильных устройствах.Подход выше (Подход 2) также работает и безопаснее на мой взгляд.Несмотря на то, что отображаются модифицирующие символы, они исчезнут при следующем действии пользователя и никогда не будут присутствовать в данных модели.

0 голосов
/ 11 декабря 2018

Используйте input type = number . 

ID: <input formControlName="userid" type="number" pKeyFilter="num" placeholder="Numbers" pInputText>

Если вам не нравятся регуляторы с правой стороны, вы можете отключить их с помощью этого в вашем css:

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type=number] {
    -moz-appearance:textfield;
}

Вот форк вашей демонстрации со всеми изменениями .

0 голосов
/ 04 декабря 2018

Вы уже пробовали с помощью: 

<input type="number" pattern="[0-9]{10}" />

следующее проверяет 10-значный номер, и я также думаю, что вы должны выполнить проверку с помощью JavaScript: 

<input type="text" id="text" onblur="validaNumericos();" />

Функция Javascript: 

function validaNumericos(){
 var inputtxt = document.getElementById('text'); 
 var valor = inputtxt.value;
 for(i=0;i<valor.length;i++){
     var code=valor.charCodeAt(i);
         if(code<=48 || code>=57){          
           inputtxt.value=""; 
           return;
         }    
   }
  
}
<input type="text" id="text" onblur="validaNumericos();" />
...