- Отмена отправки (submit) нажатием Enter в поле формы
- Как сделать - Кнопка запуска нажать Enter
- Вызвать кнопку нажмите на Enter
- Пример
- ВЫБОР ЦВЕТА
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
- Запуск события нажатия кнопки при нажатии клавиши Enter в текстовом поле с помощью JavaScript
- Решение
- Как сделать кликом кнопки на сайте нажатием 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 , добавляет символ перехода на новую строку, а не отправку данных формы. Если это сделать, то по нажатию ввода переход на новую строку срабатывать не будет.
Как сделать - Кнопка запуска нажать Enter
Вызов кнопки при нажатии на клавиатуре "Enter" с JavaScript.
Вызвать кнопку нажмите на Enter
Нажмите клавишу "Enter" внутри поля ввода, чтобы вызвать кнопку:
Пример
// Получить поле ввода
var input = document.getElementById("myInput");
// Выполнение функции, когда пользователь отпускает клавишу на клавиатуре
input.addEventListener("keyup", function(event) // Число 13 в "Enter" и клавиши на клавиатуре
if (event.keyCode === 13) // При необходимости отмените действие по умолчанию
event.preventDefault();
// Вызов элемента button одним щелчком мыши
document.getElementById("myBtn").click();
>
>);
Совет: Узнайте больше о программе свойство event.keyCode в нашей ссылке JavaScript.
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Запуск события нажатия кнопки при нажатии клавиши Enter в текстовом поле с помощью JavaScript
Часто возникают ситуации, когда на веб-странице есть текстовое поле и кнопка. Требуется, чтобы при нажатии клавиши Enter в этом текстовом поле происходило событие нажатия этой кнопки. Возьмем для примера текстовое поле для поиска и кнопку «Поиск».
Решение
Существует несколько способов реализации такого поведения в JavaScript. Один из них — использование обработчика событий. Сначала, необходимо получить доступ к элементам страницы, в данном случае, текстовому полю и кнопке:
var searchField = document.getElementById('searchField'); var searchButton = document.getElementById('searchButton'); Затем, можно добавить обработчик события ‘keypress’ к текстовому полю. В этом обработчике проверяется, была ли нажата клавиша Enter (ее код — 13), и если была, то запускается событие click для кнопки:
searchField.addEventListener('keypress', function (e) < var key = e.which || e.keyCode; if (key === 13) < // код клавиши Enter searchButton.click(); >>); Когда пользователь нажимает клавишу Enter в текстовом поле, вызывается функция обработчика. В этой функции производится проверка, является ли нажатая клавиша клавишей Enter. Если это так, то вызывается метод click() у кнопки, что инициирует событие клика по кнопке.
Таким образом, приведенный выше код позволяет реализовать требуемое поведение: при нажатии клавиши Enter в текстовом поле происходит «клик» по кнопке.
Как сделать кликом кнопки на сайте нажатием Enter?
Добрый день, подскажите пожалуйста, как можно сделать, чтобы кнопка "Добавить значение опции" не мышкой щелкалась в админ панеле, а она срабатывала по нажатию enter на клавиатуре. Что именно дописать в файле product_form.tpl чтобы работала кнопка именно так. Opencart 1.5.5.1. Заранее спасибо Ссылка на файл: https://yadi.sk/d/4E1Pcoz4YzgVCw
Вся форма выше с этой кнопкой должна быть в теге , а именно эта кнопка должна иметь атрибут type="submit" . Тогда нажатие на enter на форме (как и клик по сабмит-кнопке) будет по умолчанию рассматриваться как отправка формы.
Прошу прощения не корректно задал вопрос. Хотелось бы получить ответ, где именно, что дописать в файле product_form.tpl чтобы работала кнопка именно так
ragov, в своем ответе я указал именно то, что и каким элементам нужно дописать, чтобы работало. А файл нам никто не показал, чтобы сказать точнее. =)
ragov, ну, как я понял из кода, в форму все обернуто, и это есть хорошо. Без языкового пакета я не уверен, что нашел правильную кнопку, но если Впрочем, подозреваю, что перезагрузку страницы в связи с отправкой формы никто не ожидает. Так что нужно просто по сабмиту формы запускать нужную функцию. Например, так:
Возможно, я нашел в коде не ту функцию, тебе предстоит самостоятельно найти нужную. Кроме того, там уже есть функция на сабмит формы, правда, я не уверен, что именной этой формы. Если все же на сабмит уже повешено что-то, то либо не получится вообще сделать имитацию нажатия enter, либо нужно ставить условие: если ячейка с таким-то классом в фокусе (т.е. юзер что-то ввел в нее только что), то нажатие на enter сделает такое-то действие.