Работа с Input Text jQuery

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

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

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

1
$('#text').val();
// или
$('#text').attr('value');
JS
2
$('#text').val('Новый текст');
JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// Когда элемент теряет фокус
$('#text').blur(function(){
	alert('Фокус снят');
});
JS
7
$('#text').focus(function(){
	$(this).select();
});
JS
8
// Заблокировать
$('#text').prop('disabled', true);

// Разблокировать
$('#text').prop('disabled', false);
JS
9
<input id="text" type="text">
<p id="result">0</p>

<script>
$('#text').bind('input', function(){
	$('#result').html($(this).val().length);
});
</script>
JS
10
// Строчные
$('#text-1').bind('input', function(){
	$(this).val($(this).val().toLowerCase());
});

// Заглавные
$('#text-2').bind('input', function(){
	$(this).val($(this).val().toUpperCase());
});
JS
11
$('#text').bind('cut copy paste', function(e) {
	e.preventDefault();
});
JS
12

В примере при каждом изменении поля <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);
		}
	});
});
JS
02.02.2018, обновлено 25.11.2019
128556
Предыдущая запись Разрешить AJAX с другого домена
Следующая запись Работа с select с помощью JQuery

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

Радиолюбитель . Радиолюбитель .
22 июня 2020 в 08:39
Спасибо! Все отлично! Но "Запретить копировать, вырезать и вставлять" - не работает (по крайней мере у меня).
Александр Максимов Александр Максимов
11 января 2021 в 10:56
спасибо, все наглядно показано))
Егор Иванов Егор Иванов
3 марта 2021 в 11:10
Добрый день!
0) Отличная статья, спасибо!
1) Подскажите пожалуйста, где можно посмотреть файл ajax.php от крайнего примера?

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

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

Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
63038
+26
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
74242
+3
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
22452
+5
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
251489
+20
Примеры отправки AJAX JQuery
AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.
274392
+36
Работа с Radio Button в JQuery
Сборник приемов работы с радиокнопками в JQuery. Рассмотрим на примере группы контролов с одинаковым name=radio.
79815
+8