Элемент ввода HTML только буквы, цифры и только один пробел

Question

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

Вот мой код:

$(function() {
  $('#input-tags').on('keypress', function(e) {
    // Get tag value from input
    let tag = $(this).val();

    // Pattern for ignore special characters
    let actualChar = String.fromCharCode(e.keyCode);
    let dontHaveSpecial = /^[A-Za-z0-9]*[ ]?[A-Za-z0-9]*$/.test(actualChar); //return true if not exists special chars, else false
    if (e.keyCode === 13) {
      dontHaveSpecial = true;
    } // 13 is enter
    if (e.keyCode === 9) {
      dontHaveSpecial = true;
    } // 9 is tab
    if (e.keyCode === 32) {
      dontHaveSpecial = true;
    } // 32 is space
    if (tag.startsWith(' ') || tag.endsWith(' ')) {
      tag = tag.trim();
    } //Tag starts or ends with space

    //Check spaces count
    let spacesCount = [...tag].filter(s => s === ' ').length;
    if (spacesCount > 1) {

      //Remove extra spaces
      let spaceIndex = tag.indexOf(' ');
      let newTag = tag.substring(spaceIndex + 1).trim();
      $(this).val(newTag);
    }

    // Prevent input if have special
    return dontHaveSpecial;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input-tags">

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

Answer 1

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

$(function() {
  $('#input-tags').on('keypress', function(e) {
    // we can skip the regex test for these cases
    if (e.keyCode === 13) {
      return true;
    } // 13 is enter
    if (e.keyCode === 9) {
      return true;
    } // 9 is tab

    let actualChar = String.fromCharCode(e.keyCode);

    // Get tag value from input
    let tag = $(this).val();

    // the result after the key is pressed
    let result = tag.substr(0, e.target.selectionStart) + actualChar + tag.substr(e.target.selectionEnd);

    // Pattern for ignore special characters
    return /^[A-Za-z0-9]+[ ]?[A-Za-z0-9]*$/.test(result); //return true if not exists special chars, else false

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input-tags">

1. Поместите специальные случаи, которые всегда возвращают true в начале.
2. Получите вход actualChar и текущийзначение входа tag.
3. Создайте результат, заменив выделение (см. пример изображения ниже).
4. Убедитесь, что результат соответствует шаблону.Если нет, верните false и проигнорируйте ввод.

Обратите внимание, что, так как возможно поставить пробел между словами, которые вы можете закончитьдо значения, заканчивающегося единицей.
Чтобы справиться с этим, вам нужно trim значение перед его использованием.