Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:
<input id="text" type="text" name="form-text">А 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);
}
});
});
