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