Блог

Главная - Вопросы по программированию - Динамическое добавление регулярного выражения в текстовое поле ввода html

Динамическое добавление регулярного выражения в текстовое поле ввода html

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь динамически добавлять регулярное выражение (для приема только положительных целых чисел) в текстовое поле ввода html, также созданное динамически, используя следующее, но которое не работает:

 text.setAttribute('pattern', '^[1-9]d*

или


 text.setAttribute('pattern', '[1-9][0-9]*')
 


Но шаблон не усиливается. Принимаются любые символы.


Решение: для динамической установки атрибута и функции, как описано ниже в Can, необходимо добавить его следующим образом:


  text.addEventListener('keyup', () => this.validate())
 


Также можно использовать:


  text.addEventListener('focusout', () => this.validate())

Комментарии:

1. Небольшое примечание: вы можете читать и записывать в атрибут pattern с помощью text.pattern .

2. Спасибо Lemondoge, но шаблон не усиливается в поле. Я могу вводить любые символы.

3. ваш код хорошо работает в Google Chrome, вы уверены, что ваш браузер поддерживает атрибут pattern ?

4. Я использую последнюю версию Google Chrome. Вы добавляете шаблон динамически?

Ответ №1:

Я понял это, на самом деле это то, что символ экранирует символ после него. Вам нужно экранировать обратную косую черту, чтобы заставить шаблон работать.

 const f = document.getElementById('form');
const p = '\d\d\d';
const btn = document.getElementById('btn');
const txt = document.getElementById('text');

f.onsubmit = (e) => {
    e.preventDefault();
}

btn.onclick = () => {
    txt.setAttribute('pattern', p);
} 
 <form id="form" action="">
  <input type="text" id="text">
  <button type="submit">
    Go
  </button>
</form>
<p>
  <button id="btn">
    Add Pattern
  </button>
</p>

Комментарии:

1. Да, действительно, нужно избегать обратной косой черты, чтобы шаблон работал.

Ответ №2:

Вам нужно создать функцию и запустить ее с помощью чего-то вроде onkeyup:

 (function() {
    var previousValue = document.getElementById('myInput').value;
    var pattern = /^d $/;
    
    function validateInput(event) {
        event = event || window.event;
        var newValue = event.target.value || '';
        console.log(newValue.match(pattern));
        if (newValue.match(pattern)) {
            // Valid input; update previousValue:
            previousValue = newValue;
        } else {
            // Invalid input; reset field value:
            event.target.value = previousValue;
        }
    }
    
    document.getElementById('myInput').onkeyup = validateInput;
}());

Проверьте пример на jsfiddle

Комментарии:

1. Да, действительно, это работает с вызовом функции. Для динамической установки атрибута необходимо добавить его как таковой: text.addEventListener('keyup', () => this.validate())

)
или



Но шаблон не усиливается. Принимаются любые символы.


Решение: для динамической установки атрибута и функции, как описано ниже в Can, необходимо добавить его следующим образом:




Также можно использовать:




Комментарии:




1.  Небольшое примечание: вы можете читать и записывать в атрибут pattern с помощью    text.pattern    .  


2.  Спасибо Lemondoge, но шаблон не усиливается в поле.   Я могу вводить любые символы.  


3.  ваш код хорошо работает в Google Chrome, вы уверены, что ваш браузер поддерживает атрибут pattern ?  


4.  Я использую последнюю версию Google Chrome.   Вы добавляете шаблон динамически?  



Ответ №1:




Я понял это, на самом деле это то, что    символ экранирует символ после него. Вам нужно экранировать обратную косую черту, чтобы заставить шаблон работать.



























Комментарии:




1.  Да, действительно, нужно избегать обратной косой черты, чтобы шаблон работал.  



Ответ №2:




Вам нужно создать функцию и запустить ее с помощью чего-то вроде onkeyup:




Проверьте пример на jsfiddle




Комментарии:


1.  Да, действительно, это работает с вызовом функции.   Для динамической установки атрибута необходимо добавить его как таковой: text.addEventListener(‘keyup’, () => this.validate())  








	Метки: