Merhaba arkadaşlar..
Tab tuşunun görevi form içindeki sonraki elemente odaklanmaktır. Bu makale de jquery de enter tuşunu tab tuşu gibi kullanmayı göstericem. Bir projemde lazım oldu ben de hemen makaleye dönüştüreyim dedim. İşlem çok basit kod üzerinden anlatarak yapacağım.
Methodumuzu ister bir method içinde yapıp document.ready de çağırarak ya da benim aşağıda yaptığım gibi işlemleri direk document.ready'de yazarak yapabilirsiniz.
İyi Kodlar!
Kaynak : http://www.kodstrap.com/makale-jqueryde-enter-tusunu-tab-tusu-gibi-kullanmak-38
Tab tuşunun görevi form içindeki sonraki elemente odaklanmaktır. Bu makale de jquery de enter tuşunu tab tuşu gibi kullanmayı göstericem. Bir projemde lazım oldu ben de hemen makaleye dönüştüreyim dedim. İşlem çok basit kod üzerinden anlatarak yapacağım.
Methodumuzu ister bir method içinde yapıp document.ready de çağırarak ya da benim aşağıda yaptığım gibi işlemleri direk document.ready'de yazarak yapabilirsiniz.
1) $(document).ready(function () {
2) $('input, select, textarea').live('keydown', function (e) {
3) if (e.keyCode == 13 || e.which==13) {
4) var focusable = $('input,a,select,button,textarea').filter(':visible');
5) focusable.eq(focusable.index(this) + 1).focus();
6) return false;
}
});
});
2) $('input, select, textarea').live('keydown', function (e) {
3) if (e.keyCode == 13 || e.which==13) {
4) var focusable = $('input,a,select,button,textarea').filter(':visible');
5) focusable.eq(focusable.index(this) + 1).focus();
6) return false;
}
});
});
Yapılan işlemlerin açıklaması.
1) İşlemleri html'in tamamen yüklediğinde yapması gerektiğini söylüyorum.
2) İşlemin uygulanacağı elementlere keydown olduğunda yapsın diyorum.
3) Enter tuşunun kod'unu kontrol ediyorum.
4) Yapılacak işlemi kullanacak elementlerden görünür olanları seçiyorum
5) form içindeki fokuslanabilir elementlerden keydown olandan sonrakini fokusluyorum.
6) ve geriye false döndürüyorum. ( Bunu yapmazsak işlemimiz çalışmaz. Normalde formu post eder.)
İyi Kodlar!
Kaynak : http://www.kodstrap.com/makale-jqueryde-enter-tusunu-tab-tusu-gibi-kullanmak-38
Yorumlar
Yorum Gönder