Как ограничить ввод данных в текстовое поле

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

Атрибут maxlenght устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле, работает только c типом text и password.

Тоже самое делает атрибут size, но лучше его не использовать т.к. этот атрибут не работает в Google Chrome.

<input type="text" maxlength="10" placeholder="Максимум 10 символов">
HTML

Пример:

У поля input type="number" атрибут maxlenght не работает, а с заданным атрибутом max, с клавиатуры всё равно можно ввести любое количество символов – это можно исправить с помощью JQuery:

<input type="number" maxlength="10" placeholder="Максимум 10 символов">
HTML

JQuery:

$('body').on('input', 'input[type="number"][maxlength]', function(){
	if (this.value.length > this.maxLength){
		this.value = this.value.slice(0, this.maxLength);
	}
});
JS

Пример:

В случаях когда не хочется использовать input type number, но в обычное текстовое поле требуется разрешить ввод только цифр:

<input type="text" class="input-number" placeholder="Только цифры">
HTML

JQuery:

$('body').on('input', '.input-number', function(){
	this.value = this.value.replace(/[^0-9]/g, '');
});
JS

Пример:

Ввод определенного диапазона чисел в input

Например, если нужно разрешить вводить только цифры от 1 до 50:

<input class="input-range" type="text" data-min="1" data-max="50" placeholder="Цифры от 1 до 50">
HTML

JQuery:

$('body').on('input', '.input-range', function(){
	var value = this.value.replace(/[^0-9]/g, '');
	if (value < $(this).data('min')) {
		this.value = $(this).data('min');
	} else if (value > $(this).data('max')) {
		this.value = $(this).data('max');
	} else {
		this.value = value;
	}
});
JS

Пример:

* В примере используются атрибуты data-min и data-max т.к. атрибуты min и max у <input type="text"> не валидны.

Только цифры, точка и запятая в поле input

<input type="text" class="input-number" placeholder="Только цифры, точка или запятая">
HTML

JQuery:

$('body').on('input', '.input-number', function(){
	this.value = this.value.replace(/[^0-9\.\,]/g, '');
});
JS

Пример:

Только буквы английского и русского алфавита в поле input

<input type="text" class="input-words" placeholder="Буквы английского и русского алфавита">
HTML

JQuery:

$('body').on('input', '.input-words', function(){
	this.value = this.value.replace(/[^a-zа-яё\s]/gi, '');
});
JS

Пример:

Буквы русского алфавита в поле input

<input type="text" class="input-ru" placeholder="Буквы русского алфавита">
HTML

JQuery:

$('body').on('input', '.input-ru', function(){
	this.value = this.value.replace(/[^а-яё\s]/gi, '');
});
JS

Пример:

Буквы английского алфавита в поле input

<input type="text" class="input-en" placeholder="Буквы английского алфавита">
HTML

JQuery:

$('body').on('input', '.input-en', function(){
	this.value = this.value.replace(/[^a-z\s]/gi, '');
});
JS

Пример:

Только большие буквы в поле input

<input type="text" class="input-upper" placeholder="Только большие буквы">
HTML

JQuery:

$('body').on('input', '.input-upper', function(){
	this.value = this.value.toUpperCase();
});
JS

Пример:

Только маленькие буквы в поле input

<input type="text" class="input-lower" placeholder="Только маленькие буквы">
HTML

JQuery:

$('body').on('input', '.input-lower', function(){
	this.value = this.value.toLowerCase();
});
JS

Пример:

16.01.2021
16649

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

igrok 666 igrok 666
11 октября 2021 в 10:12
0
numberPlugin - это плагин для стилизации поля для ввода чисел input type="number" всё расписано на русском как подключать, применён уже не на одном реальном сайте.
https://number-plugin.ru
Для подключения плагина добавьте в <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="number_plugin/number_plugin.js" type="text/javascript"> </script>
<link href="number_plugin/number_plugin.css" type="text/css" rel="stylesheet">

Создайте элемент
<input type="number" class="numb" id="1" value="1">

И подключите скрипт
$(document).ready(function () {
$('.numb').number_plugin();
});

, чтобы добавить комментарий.

Другие публикации

Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
39550
+4
Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
3819
+2
Поле для ввода PIN-кода
Если требуется поле для ввода пин-кода, можно использовать следующий вариант на jQuery.
3691
+1
Input type number
В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности...
21606
+4
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
23544
+29
Загрузка файлов на сервер PHP
В статье приведен пример формы и php-скрипта для безопасной загрузки файлов на сервер, возможные ошибки и рекомендации при работе с данной темой.
46192
+19