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

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

Атрибут 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

Пример:

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

Например, если нужно разрешить вводить только цифры от 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 type="text" class="input-number" placeholder="Только цифры, точка или запятая">
HTML

JQuery:

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

Пример:

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

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

JQuery:

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

Пример:

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

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

JQuery:

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

Пример:

Только строчные буквы

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

JQuery:

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

Пример:

Если требуется ограничить ввод в поле одной первой буквой, например «М.».

<input type="text" class="input-surname" placeholder="Одна заглавная буква">
HTML

JQuery:

$('body').on('input', '.input-surname', function(e){
	if (e.originalEvent.inputType == 'deleteContentBackward') {
		this.value = '';
	} else {
		value = this.value;
		if (value.replace(/[^0-9]/g, '').length == 1) {
			this.value = '';
		} else {
			value = value.replace(/[^a-zа-яё]/gi, '').substr(-1, 1);
			if (value.length != 0) {
				this.value = value.toUpperCase() + '.';
			} else {
				this.value = '';
			}					
		}
	}
});
JS

Пример:

16.01.2021, обновлено 29.03.2022
28537

Комментарии 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();
});

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

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

Маски ввода для текстовых полей
Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит...
71015
+3
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
42799
+4
Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
4418
+2
Поле для ввода PIN-кода
Если требуется поле для ввода пин-кода, можно использовать следующий вариант на jQuery.
4458
+1
Input type number
В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности...
29246
+10
Поле для ввода показаний счетчика
Пример составного поля для ввода показаний приборов учета с использованием несколькольких и jQuery. Обычно показание...
1907
0