Скасування відправлення (submit) натисканням Enter у полі форми
Виявив новий корисний нюанс при роботі з формами на сайтах: коли користувач працює із заповненням полів на такій формі, часто відбувається помилкове відправлення простим натисканням Enter на клавіатурі. Річ у тім, що з роботі з звичайними віконними додатками, за умовчанням, кнопка введення призводить до табуляції, тобто. переходу наступне поле форми. У формі на сторінці сайту, ця ж дія викликає подію надсилання введених даних на сервер. Тому користувачі, які звикли до роботи з віконними програмами, можуть помилково багаторазово відправляти некоректно або не повністю заповнені дані.
Частково цю проблему вирішують додаткові обробники перевірки коректності заповнених даних, які або зупинять надсилання, або повідомлять про помилку та дозволять продовжити введення. Але іноді, простіше просто вимкнути цей механізм.
Для цього достатньо додати свій обробник на подію введення даних. Робиться це установкою коду, який при натисканні клавіші клавіатури OnKeydown перевіряє, чи є ця клавіша Enter. Якщо натиснути клавішу введення, процедура дії зупиняється. Інакше продовжується обробка події за умовчанням – просто введення даних.
Найпростішим способом буде додавання атрибуту події безпосередньо в тег поля форми:
text " name=" my_text " onkeydown=" if(event.keyCode==13) " />
Тут, на подіюonkeydown(натискання клавіші клавіатури) виконується простий скрипт перевірки, чи код вводимого символу дорівнює 13 (клавішаEnter). Якщо код саме цей, то рядокreturn false;зупиняє виконання цієї події.
Це рішення не дуже зручне, якщо полів на формі багато. Відповідно, потрібно або проставити цей оброблювач для кожного поля,або прописати загальний скрипт всім. Це простіше зробити засобами бібліотекиJQuery.
$(document).ready( function () < $( "input[type=text]" ).keydown( function (event) < if(event.keyCode == 13) < event.preventDefault(); return false; > >); >);
Тут виконується той самий механізм, за винятком того, що слід вказати, які поля форми будуть реагувати на подіюkeydownвказаним способом. Наприклад, можна вказати спеціальний клас для тегів полів, яким можна вибірково призначити потрібні поля:
$(".stop-enter").keydown( function (event)
Або зробити для всіх текстових полів:
$( "input[type=text]" ).keydown( function (event)
Слід звернути увагу, що це скрипт пов'язувати з багаторядковим полемtextarea, т.к. в ньомуEnter, додає символ переходу на новий рядок, а не надсилання даних форми. Якщо це зробити, то після натискання введення перехід на новий рядок спрацьовувати не буде.