Input с ограничением слов

Question

Как сделать текстовой input с ограничением слов? только 10 или только 18? Мои попытки смогли добиться только такого результата

(function () {
  var max = 5,
    count = 0,
    input = null,
    result = null;

  function init() {
    input = document.querySelector('#inp');
    result = document.querySelector('#count');

    input.addEventListener('keyup', keyup);
  }

  function keyup(e) {
    if ((count = getNumOfComma(this.value)) >= max) {
      result.innerHTML = '<strong>MAX WORDS</strong>'; // Лимит превышен
    } else {
      result.innerHTML = count; // sd
    }
  }

  function getNumOfComma(value) {
    var ch, i = 0;

    for (ch in value) {
      ch = value[ch];

      if (ch == ' ' || ch == ' ')
        i++;
    }

    return i;
  }

  document.addEventListener('DOMContentLoaded', init);
}());

<input type="text" class="input-words" placeholder="Буквы английского алфавита" id="inp"/>
<span id="count">0</span>

Answer 1

Я бы сделал таким образом:

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

чтобы получать верное число слов предыдущий символ перед проверкой надо сделать разделителем, а в конце текста из поля ввода добавить разделитель (иначе последнее слово не будет подсчитываться в некоторых случаях)

кроме того, поскольку возможных разделителей много, то я бы создал массив разделителей и искал бы совпадение в нем

const input = document.querySelector('#field');

input.addEventListener('input', updateValue);

oldText = input.value;

function updateValue(e) {

    // подсчитать кол-во слов
    const seperators = [' ', '.', ','];
    
    let wordsCount = 0;
    let lastLetter = ' ';

    for (let letter of e.target.value + " ") {

        if (seperators.includes(letter) && !seperators.includes(lastLetter)) {
            wordsCount ++;
        }
        
        lastLetter = letter;
    }

    // сформировать условие ввода текста в поле ввода
    const isCorrect = (wordsCount <= 8);

    // если текст введён некорректный, вернуть старый текст
    if (isCorrect == true) {
//        input.value = e.target.value;
        oldText = e.target.value;
    }
    else {
        input.value = oldText;
    }
}

#field {
    width: 90%;
}

<input id = 'field' value = 'Введено несколько    слов.Наверное'></input>

Answer 2

Как вариант:

const MAX_WORDS = 4;

document.querySelector('input').addEventListener('keydown', (event) => {
  if (event.target.value.split(/\W+/).length > MAX_WORDS) {
    if (event.key.length === 1) {
      event.preventDefault()
    }
  } 
})

<input />

БЛОГ НА HUSL

Input с ограничением слов

Ответы (2 шт):