Использование Regex, чтобы разрешить только определенные символы в поле ввода HTML, кажется, не работает, когда начинается с недопустимого символа

Question

Я пытаюсь разрешить только определенные символы, которые пользователь может вводить / копировать в поле HTML- <input>, используя следующее регулярное выражение:

return /^[A-Za-z0-9 ]*$/.test(value); 

Это работает для меня правильно, но только если я начинаюс разрешенным символом (например: « A »).

Однако, если я начинаю с символа, который не разрешен моим регулярным выражением (например: "! "), я неожиданно могу ввести символы, которые должны быть отключены:

Для тестирования я создал следующую скрипку: >> Нажмите << </a>

Полный скрипт в качестве ссылки:

<input type="text" class="polarion-TextBox" name="targetDocument" style="width: 100%;">

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {

    window.setTimeout ( function() {  
    // Restricts input for the given textbox to the given inputFilter.
    function setInputFilter(textbox, inputFilter) {
      ["input"].forEach(function(event) {
        textbox.addEventListener(event, function() {
          if (inputFilter(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
          } else if (this.hasOwnProperty("oldValue")) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
          }
        });
      });
    }

   // Restrict input to digits and '.' by using a regular expression filter.
  setInputFilter(document.getElementsByName("targetDocument")[0], function(value) {
  return /^[A-Za-z0-9 ]*$/.test(value); 

  });

    }, 1000);


}, false);  
</script>

Answer 1

Это работает для меня:

function setInputFilter(textbox, inputFilter) {
  ["input"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        if (this.hasOwnProperty("oldValue")) {
          this.value = this.oldValue;
          this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
        } else {
          this.value = "";
          this.setSelectionRange(0, 0);
        }
      } else {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      }
    });
  });
}

window.addEventListener("DOMContentLoaded", function() {
  setInputFilter(document.getElementsByName("targetDocument")[0], function(
    value
  ) {
    return /[^A-Za-z0-9 ]/g.test(value);
  });
});

<input type="text" class="polarion-TextBox" name="targetDocument" style="width: 100%;">

Основным изменением является очистка value, если нет oldValue для восстановления при неверном вводе. Я также перевернул логику и вернул true, если есть недопустимые символы.

Answer 2

1. У вас нет oldValue, когда вы вводите какой-либо символ в первый раз, поэтому ваш код не перейдет в ваше второе условие
2. Если ваш первый символ не совпадает, что бы вы нивведите next, значение никогда не переходит в первое условие, поэтому oldValue никогда не устанавливается и, поскольку не существует oldValue, ваш код не переходит во второе условие.

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

Добавьте textbox.oldValue = ""; до textbox.addEventListener.