Події для форм та елементів форм
.submit() - подія, що відправляє дані з форми
.focus() - події, що відбуваються при попаданні курсору в поле input
. blur() - події, що відбуваються при втраті input'ом фокуса
.change() - подія, що виникає в результаті змін в селекторах, чекбоксах та радіокнопках
.select() - подія, що відбувається в результаті віділення тексту в <textarea> та <input type="text" />
.input() - подія, що відслідковує зміни в input
Приклади
.submit()Відправка форми
Кнопка "1. type='button' #bs1" запускає функцію, яка записана в методі .submit()
/* відправка кнопкою, запускається функція, яка записана для .submit()*/
$("#bs1").click(function(){
$("#myF1").submit();
});
/* відправка форми кнопкою submit з запуском функції */
$('#myF1').submit(function (){
alert('Дані відправлені');
});
Подія submit() - скорочення для .on("submit", handler) (прикріплення події), тому можна прибрати встановленний обробник за допомогою .off( "submit" )
.fоcus() - подія, що відбувається при попаданні курсору в поле input
. blur() - подія, що відбувається при втраті input'ом фокуса
$('#focusblock input').focus(function (){
$(this).css('border','2px solid green');
});
$('#focusblock input').blur(function (){
$(this).css('border','2px solid red');
});.change()
Подія, що відбувається в результаті змін у селекторах, чекбоксах та radio-кнопках
#infochange
$('#changeblock select').change(function (){
$('#infochange').text('Зміни в селекторі');
});
$('#changeblock input:checkbox').change(function (){
$('#infochange').text('Зміни в чекбоксі');
});
$('#changeblock input:radio').change(function (){
$('#infochange').text('Зміни в radio-кнопках');
});
.select()
Подія, що відбувається в результаті віділення тексту в <textarea> та <input type="text" />
#infoselect
$('#selectblock textarea').select(function (){
$('#infoselect').text('Подія в textarea');
});
$('#selectblock input:text').select(function (){
$('#infoselect').text('Подія в input');
});
.input()
Подія, що відслідковує зміни в input
#si
$(document).on('input', '#ii', function () {
var ii = $(this).val();
$('#si').text(ii);
});
далі ✏