Работа с Input Text jQuery

02.02.2018

56891

Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:

<input id="text" type="text" name="form-text">

HTML

А jQuery связывается с ним по атрибуту id="text" (селектор #text).

Получить содержимое текстового поля

$('#text').val();
// или
$('#text').attr('value');

Добавить значение в текстовое поле

$('#text').val('Новый текст');

Добавить текст перед и после значения

// Добавить текст в начало
$('#text').val('before ' + $('#text').val());

// Добавить текст в конец
$('#text').val($('#text').val() + ' after');

Очистить поле

$('#text').val('');

Удалить поле

Метод remove() удаляет элементы из DOM включая дочерние.

$('#text').remove();

Добавить/удалить CSS класс

Метод addClass() добавляет в атрибут class="" значение, а removeClass() удаляет его.

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

// Добавить класс
$('#text').addClass('active');

// Удалить класс
$('#text').removeClass('active');

// Переключить класс
$('#text').toggleClass('active');

Фокусировка

Установить фокус

$('#text').focus();

События при смене фокуса

// Событие когда элемент получил фокус
$('#text').focus(function(){
	alert('Фокус установлен');
});

// Когда элемент теряет фокус
$('#text').blur(function(){
	alert('Фокус снят');
});

Выделение всего текста при клике на input

$('#text').focus(function(){
	$(this).select();
});

Заблокировать и разблокировать input

// Заблокировать
$('#text').prop('disabled', true);

// Разблокировать
$('#text').prop('disabled', false);

Подсчет количества символов

<input id="text" type="text">
<p id="result">0</p>

<script>
$('#text').bind('input', function(){
	$('#result').html($(this).val().length);
});
</script>

Принудительный регистр вводимого текста

// Строчные
$('#text-1').bind('input', function(){
	$(this).val($(this).val().toLowerCase());
});

// Заглавные
$('#text-2').bind('input', function(){
	$(this).val($(this).val().toUpperCase());
});

Запретить копировать, вырезать и вставлять

$('#text').bind('cut copy paste', function(e) {
	e.preventDefault();
});

Отправить значение через ajax

В примере при каждом изменении поля <input id="text" type="text"> его значение отправляется методом POST на ajax.php.

$('#text').bind('input', function(){
	$.ajax({
		url: '/ajax.php', 
		method: 'post',
		dataType: 'html',
		data: {text: $('#text').val()},
		success: function(data){
			$('#result').html(data);
		}
	});
});