Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:
А jQuery связывается с ним по атрибуту id="text"
(селектор #text
).
Получить содержимое текстового поля
Добавить значение в текстовое поле
Добавить текст перед и после значения
// Добавить текст в начало
$('#text').val('before ' + $('#text').val());
// Добавить текст в конец
$('#text').val($('#text').val() + ' after');
Очистить поле
Удалить поле
Метод remove()
удаляет элементы из DOM включая дочерние.
Добавить/удалить CSS класс
Метод addClass()
добавляет в атрибут class=""
значение, а removeClass()
удаляет его.
Метод toggleClass()
работает как переключатель, при первом вызове, если у элемента нет такого класса то добавляет, при повторном удаляет его.
// Добавить класс
$('#text').addClass('active');
// Удалить класс
$('#text').removeClass('active');
// Переключить класс
$('#text').toggleClass('active');
Фокусировка
Установить фокус
События при смене фокуса
// Событие когда элемент получил фокус
$('#text').focus(function(){
alert('Фокус установлен');
});
// Когда элемент теряет фокус
$('#text').blur(function(){
alert('Фокус снят');
});
Выделение всего текста при клике на input
Заблокировать и разблокировать 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());
});
Запретить копировать, вырезать и вставлять
Отправить значение через 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);
}
});
});
0) Отличная статья, спасибо!
1) Подскажите пожалуйста, где можно посмотреть файл ajax.php от крайнего примера?