О проекте
О проекте

Ограничение символов в поле ввода

В веб-разработке “инпут лимит” обычно означает ограничение на количество символов, которое можно ввести в поле ввода (<input> или <textarea>).

Как установить лимит символов в поле ввода?

1. Атрибут maxlength (для <input> и <textarea>)

Ограничивает максимальное количество символов:

<input type="text" maxlength="20" placeholder="Максимум 20 символов">
<textarea maxlength="100" placeholder="Максимум 100 символов"></textarea>

2. JavaScript-валидация (если нужна динамическая проверка)

Можно добавить обработчик события input, чтобы показывать оставшееся количество символов:

<input type="text" id="limitedInput" maxlength="30">
<p>Осталось символов: <span id="charCount">30</span></p>

<script>
  const input = document.getElementById('limitedInput');
  const charCount = document.getElementById('charCount');
  const maxLength = input.maxLength;

  input.addEventListener('input', () => {
    const remaining = maxLength - input.value.length;
    charCount.textContent = remaining;
  });
</script>

3. Ограничение на минимальное количество символов (minlength)

Можно задать минимальное количество символов:

<input type="text" minlength="3" required placeholder="Минимум 3 символа">

Run HTML

4. Числовые ограничения (min и max для `<input type=”number”>)

Для числовых полей можно ограничить диапазон:

<input type="number" min="1" max="100" placeholder="Число от 1 до 100">

Вывод

  • Используйте maxlength для ограничения текстовых полей.
  • Для динамического отображения оставшихся символов добавьте JavaScript.
  • Для чисел применяйте min и max.

Related Posts