Html отправка формы enter

Отмена отправки (submit) нажатием Enter в поле формы

Обнаружил новый полезный нюанс при работе с формами на сайтах: когда пользователь работает с заполнением полей на такой форме, часто совершается ошибочная отправка простым нажатием Enter на клавиатуре. Дело в том, что при работе с обычными оконными приложениями, по умолчанию, кнопка ввода приводит к табуляции, т.е. переходу на следующее поле формы. В форме на странице сайта, это же действие вызывает событие отправки введенных данных на сервер. Поэтому, привыкшие к работе с оконными приложениями пользователи, могут ошибочно многократно отправлять некорректно или не полностью заполненные данные.

Частично эту проблему решают дополнительные обработчики проверки корректности заполненных данных, которые либо остановят отправку, либо сообщат об ошибке и позволять продолжить ввод. Но иногда, проще просто отключить этот механизм.

Для этого достаточно добавить свой обработчик на событие ввода данных. Делается это установкой кода, который при событии нажатия клавиши клавиатуры OnKeydown проверяет, является ли эта клавиша Enter. Если нажата клавиша ввода, то процедура действия останавливается. В противном случае продолжается обработка события по умолчанию – просто ввод данных.

Простейшим способом будет добавление атрибута события непосредственно в тег поля формы:

text" name comment">my_text" onkeydown comment">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 , добавляет символ перехода на новую строку, а не отправку данных формы. Если это сделать, то по нажатию ввода переход на новую строку срабатывать не будет.

Источник

JS. Как отправить input по нажатию Enter?

Подскажите пожалуйста что не правильно сделал? Спасибо заранее!

Простой 1 комментарий

space2pacman

Айдишники разные и вызов функции. Зачем вызов функции делать инлайново ? Зачем вообще айди использовать ?

nikolayshabalin

Оберните формой и повесьте слушателя submit

Николай Шабалин Спасибо. Но трабла теперь в JS походу. дело в том что это чат бот (cht.ignn.ru) и теперь и отправке по ENTER он отправляет сообщение и обновляет страницу чата..

leni_m

Во-первых, у кнопки , а подписываетесь вы почему-то на событие keydown элемента sendtext. Такого элемента не существует, потому и не срабатывает обработчик. Во-вторых, вы и инлайном вешаете обработчик и через селектор. Так не нужно делать. Как минимум потому, что это усложняет поддержку кода. Надо делать так:

function buttonOtprav() < //. >$('#send').on('click', buttonOtprav) $('#send').on('keydown', function(e) < if (e.which === 13) < buttonOtprav() >>)

Однако, если это возможно, воспользуйтесь лучше ответом Николай Шабалин.

PS: Не называйте функции и переменные транслитом, типа buttonOtprav, это как-то, имхо, не солидно. Назовите buttonSend.

Источник

Отправка данных по нажатию Enter

Нужно сделать так, чтобы при нажатии на кнопку Enter (на клавиатуре) данные отправлялись на страницу redirect_page.php?

Добавлено через 13 секунд
Ах, да и при этом фокус находиться на textarea. То есть обычно при нажатии на Enter — переход на следующую строку, а надо отправку данных.

Отправка данных по нажатию Enter
Всем привет, помогите разобраться..Пишу редирект по нажатию Enter в текстовом поле: function.

Отправка формы по нажатию Enter
Всем привет,как сделать,что бы форма отправлялась по нажатию Enter,но в тоже время её можно было.

Отправка формы по нажатию Enter
Доброго времени суток. Как реализовать отправку формы, а точнее вызов функции JavaScipt, по.

Отправка текста инпута по нажатию Enter
Здравствуйте. у меня есть форма вот <form action="" <input type="text".

Лучший ответ

Сообщение было отмечено KVESTOR как решение

Решение

form action="redirect_page.php" method="post" id='form_redirect'> textarea id='text_redirect' name="text" autofocus required> /textarea> input type="submit"> /form>

И прикрутить к старинце снизу javascript c кодом:

1 2 3 4 5 6 7 8 9 10 11 12 13 14
document.body.onkeydown = function(event)  else { alert("ЗАПОЛНИТЕ ФОРМУ!"); } } }

Добавлено через 26 минут
Также можно добавить перевод строки с помощью сочетания клавиш CTRL + ENTER

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
document.body.onkeydown = function(event)  window.event; var code = e.keyCode  else { return false; } } else if(code == 13 && activeEl == "text_redirect") { var text_redirect = document.getElementById('text_redirect').value; text_redirect = text_redirect.replace(/^\s+/, ""); if(text_redirect != "") { document.getElementById('form_redirect').submit(); } else { return false; } } }

А вот что нужно сделать, чтобы Enter не делал перенос строки, конкретно у меня при нажатии на Enter происходит перевод строки, а затем отправка данных. Как-то это не очень.

Лучший ответ

Сообщение было отмечено KVESTOR как решение

Решение

document.getElementById('form_redirect').submit();
document.getElementById('form_redirect').submit();
document.getElementById('text_redirect').value += "\n";
document.getElementById('form_redirect').submit();
document.getElementById('text_redirect').value += "\n";

Здесь происходит перевод на новую строку, при нажатии на сочетание клавиш CTRL + ENTER. Но форма при это не отправляется. Так что здесь добавлять не обязательно.

Добавлено через 4 минуты
Но можете и добавить если хотите. Хоть с ним, хоть без него, в любом случае результат одинаковый.

Добавлено через 10 минут
Конечный вариант(откорректированный):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
document.body.onkeydown = function(event)  window.event; var code = e.keyCode  else if(code == 13 && activeEl == "text_redirect") { var text_redirect = document.getElementById('text_redirect').value; text_redirect = text_redirect.replace(/^\s+/, ""); if(text_redirect != "") { document.getElementById('form_redirect').submit(); return false; } else { return false; } } }

Отправка формы только по нажатию клавиши Enter на определенное поле
Каким образом можно осуществить отправку формы на url, только по нажатию клавиши Enter - на.

Отправление данных формы по нажатию ENTER
Как седлать так, чтобы данные введенные в форму можно было отправить нажатием кнопки ENTER, а не.

Обработка данных из TextBox по нажатию Enter
Здравствуйте, начал работать с winform в C# и появился такой вопрос: у меня в форме есть textbox, в.

Отправка данных на контроллер PIC по нажатию на ActiveX компонент
Здравствуйте форумчани. У меня в процессе работы возник вопрос возможно ли отправлять данные с ПК.

Отправка данных по нажатию на ссылку без выполнения действия по умолчанию
Есть ссылка, которая отвечает только за передачу данных на другой сайт Как сделать с помощь js что.

Запуск по нажатию на ENTER
Доброго дня. всё никак не пойму, что не так. вообщем, суть проста, при запуске бытника.

Источник

Читайте также:  Restart buffer php bitrix
Оцените статью