Отправка формы с помощью Ctrl + Enter на javascript


Ctrl+Enter и клавиатурные события Javascript

Для отправки сообщений в сети принято использовать сочетание клавиш Crtl Enter, а для навигации по страницам — Ctrl и стрелочки. Эта статья рассказывает о том, как сделать это на своем сайте.

Отправка формы по Ctrl Enter

Код и пример использования с формой.

Скрипт не работает в Opera, т. к. такое сочетание клавиш уже использовано в этом браузере.

Получение объекта по id

От стандартного document.getElementById отличается только длиной.

Получение объектов по имени класса

Первый аргумент — имя класса, второй — имя тега (не обязательный), третий — внутри какого объекта искать (не обязательный).

Горячие клавиши на JavaScript

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Большое спасибо за вашу помощь и внимательность к нам!

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

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

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

Кто же не пользуется социальной сетью, то ниже приведен скриншот данного скрипта.

Начинаем с первого шага и подключаем наш скрипт горячих клавиш dershortcut.js, а также не забываем про стили demo.css.

Теперь нам потребуется создать форму, в которой будет для примера, три поля — имя, фамилия и сообщение. Обработчика для данной формы я не делал, так как мы пока что, только знакомимся с применением горячих клавиш.

Заметьте, что сначала создается форма с обязательным именем form, тег атрибута fieldset тоже является обязательным, так как без него поля при нажатии на клавишу Enter не будет переключаться должным образом между собой, используя событие клавиатуры onKeyPress. У каждого поля, как видим имеется свое значение и функция. Для поля textarea также имеются события перехвата ввода с клавиатуры onKeyDown и onKeyUp, но с ними мы познакомимся позже, во втором шаге, где подробно расписан код JavaScript. Кстати, не забываем предать стили нашей форме, чтобы она корректно отображались.

Переходим ко второму шагу и тут мы ознакомимся с принципом реализация JavaScript кода для назначения горячих клавиш. И так, для этого я создал специально четыре переменные, которые являются нашими часто применяемыми клавишами. Первая переменная enter в которой находится число 13. Так вот, данное число и является кодом данной клавиши при нажатии. Остальные тоже аналогично — shift, ctrl, alt и capslock. Перед этим нам необходимо прописать функцию KeyDown со значением event, которая будет относиться к полю textarea по событию onKeyDown.

Далее создаем переменную text и записываем в нее получение от поля textarea, какой-либо передачи данных при введении и отправке текста. В поле идентификатора text, также не забываем убрать лишние переносы строк с помощью функции replace.

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

Когда проверку мы сделали и задали переменные, нам осталось сделать две последних проверки, первая из которых клавиша отправки сообщения должна быть enter, а вторая, проверяет длину текста, которая должна быть боль ноля.

Теперь можем смело переходить к другим горячим клавишам, таким как alt, shift, ctrl и capslock. Для начала нам потребуется условие, которое будет утверждать значение нажатой клавиши capslock.

Далее при нажатии клавиши ctrl мы добавляем в поле textarea теги

, при нажатии alt добавляем тег переноса , при сочетании нажатий двух клавиш shift и capslock мы добавляем текст «ROOTHELP.RU — СКРИПТЫ ДЛЯ САЙТА!«.

Теперь перейдем к функции keyUp со значением event. Она нужна нам исключительно для отката действий или сброса при нажатии клавиш.

К примеру, теперь нам нужно отменить нажатую клавишу capslock для этого пропишем.

И на последок, не плохо было бы сделать переключения между полями — имя, фамилия, сообщения через клавишу Enter. Делается это все через функцию KeyPress с двумя значениями event и fields. Первое общение значение KeyCode, а второе используется для конкретного поля. Уместно употребить тут событие focus, ведь с помощью него и скрипт переключается между элементами полей.

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

А на этом все, благодарю всех за внимание, прощаюсь не надолго. Всем удачи!

Отправка формы с помощью Ctrl + Enter на javascript

Ну вот и тема для первой статьи появилась. Jquery для начинающих.

Заказчик пожелал, чтобы можно было по нажатию кнопки энтер на клавиатуре перемещаться между полями формы заказа товара и если человек дошёл до кнопки “отправить”, то по нажатию на неё “enter”-ом форма отправлялась.

Казалось бы – простая задача, но дьявол кроется в мелочах.

Итак, если бы мы имели простую и нормальную разметку, а ручки у верстальщика росли из нужного места, то форма выглядела бы примерно так:

Добавим немного css:

Как видите, здесь нет никаких лишних html тегов, что очень положительно сказывается на реализации задачи. Код простой и лаконичный:

Тадааааам! Все работает)

А теперь поясню построчно.

В первой строчке мы выбираем все поля, по которым будем перемещаться – это все input, форма комментария textarea и кнопка отправки формы buttom. На реальном проекте нужно выбирать по id формы или по классам полей, но для простоты понимания выборка происходит по именам тегов.

Илон Маск рекомендует:  Sqlфункции в подзапросе

Во второй строчке мы устанавливаем обработчик ввода символа с клавиатуры .keypress на все выбранные нами поля. Он срабатывает на любой ввод с клавиатуры.

Третья строчка – проверка на соответствие нажатой клавиши. Нам нужен энтер, которому присвоен код 13.

В большинстве случаев, стандартное поведение при нажатии “enter” – отправка формы. Нам это не нужно, поэтому сбрасываем стандартное поведение – event.preventDefault().

Дальше идет проверка – если это кнопка отправки формы, то мы имитируем клик по ней с помощью конструкции $(this).click(). Можно было бы отправить форму и такой конструкцией $(this).form.submit(), но тогда бы не сработали стандартные html проверки полей на заполнение.

Последним действием идет выбор следующего элемента с помощью .next() и установка на нем фокуса с помощью .focus() В данном случае переходы работают.

А если верстка не такая простая? Если input-ы обёрнуты в div-ы, да еще в label? Как сделать переход на следующий input, ведь функция .next() выберет только следующий элемент на странице и это явно будет не input? Можно попробовать извернуться с .parent, если все input в одинаковых обертках. Но если они по разному расположены в шаблоне, то писать под каждый input свой выход наверх – извращение ещё то))

Мне как раз попался такой шаблон – смотрел и плакал)) Даже не пытайтесь понять, зачем все эти div и table, а за стили в коде руки бы поотрывал. Но заказчика не выбирают, поэтому приступим.

С такой разметкой поменяем немного css:

А теперь напишем jquery скрипт так, что нам будет без разницы расположение input и всех нужных нам полей в коде формы.

В первой строчке мы создаем html коллекцию из нужных нам элементов input, textarea и кнопки button. Кстати, если обратите внимание на html разметку, то там присутствует input для внутренних целей с type = “h >

Далее, как и в предыдущем примере, на все выбранные элементы мы вешаем обработчик нажатий .keypress, после чего проверяем, нажат ли “enter”. Если он нажат, то сбрасываем стандартное поведение элемента event.preventDefault().

Ну вот теперь мы подошли к главному. В коллекции $elements каждому элементу присвоен порядковый номер – index. Jquery функция .eq() умеет выбирать элемент из коллекции с нужным нам индексом. В this находится элемент, на котором произошло нажатие “enter”. Значит index следующего элемента будет index(this) + 1. Записываем этот элемент в переменную $next = $elements.eq($elements.index(this) + 1);

Дальше опять проверяем, не кнопка ли это отправки формы и если да, то кликаем на нее $(this).click(). Если это не кнопка, то переводим фокус на элемент, записанный в переменной $next.

А вот и результат:

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

Если у Вас есть более изящные решения или хотите закидать меня тухлыми помидорами, то милости просим в комментарии)) Я буду только рад критике и полезным советам.

Отправка формы по Ctrl + Enter

По скольку в Java Script я не силен — прошу помощи)

Что не так в этом коде?

NataliaAntalia 1-й за Октябрь
Очков активности: 480 2 темы, 58 сообщений, 5 баллов репутации
Сайт: zdorovemedicina.ru

ShowPrint (ShowPrint.ru)
Очков активности: 156 0 тем, 13 сообщений, 8 баллов репутации

BLIK
Очков активности: 147 0 тем, 14 сообщений, 7 баллов репутации

Megoydagi (24ho.ru)
Очков активности: 78 4 темы, 14 сообщений, 2 балла репутации

Totti
Очков активности: 54 0 тем, 9 сообщений, 4 балла репутации

NataliaAntalia (zdorovemedicina.ru)
Очков активности: 51 Вне конкурса за определение пользователя месяца

MattCutts (dmitrylee.ru)
Очков активности: 45 Вне конкурса за определение пользователя месяца

miketomlin
Очков активности: 45 0 тем, 10 сообщений, 3 балла репутации

TimurR
Очков активности: 24 2 темы, 2 сообщения, 2 балла репутации

Vmir
Очков активности: 22.5 1 тема, 12 сообщений, 1 балл репутации

kolver
Очков активности: 21 3 темы, 5 сообщений, 1 балл репутации

Выразительный JavaScript: Формы и поля форм

Содержание

Я нынче ж на ученом кутеже
Твое доверье службой завоюю,
Ты ж мне черкни расписку долговую,
Чтоб мне не сомневаться в платеже.

Мефистофель, в «Фаусте» Гёте

Формы были кратко представлены в предыдущей главе в качестве способа передачи информации, введённой пользователем, через HTTP. Они были разработаны в вебе до появления JavaScript, с тем расчётом, что взаимодействие с сервером происходит при переходе на другую страницу.

Но их элементы являются частями DOM, как и остальные части страницы, а элементы DOM, представляющие поля формы, поддерживают несколько свойств и событий, которых нет у других элементов. Это делает возможным просматривать и управлять полями ввода из программ JavaScript и добавлять функциональности к классическим формам или использовать формы и поля как основу для построения приложения.

Веб-форма состоит из любого числа полей ввода, окружённых тегом

Интерфейс JavaScript для таких элементов разнится в зависимости от типа. Мы рассмотрим каждый из них чуть позже.

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

Когда значение поля изменяется, запускается событие “change”.

Фокус

В отличие от большинства элементов документа HTML, поля форм могут получать фокус ввода клавиатуры. При щелчке или выборе их другим способом они становятся активными, т.е. главными приёмниками клавиатурного ввода.

Если в документе есть текстовое поле, то набираемый текст появится в нём, только если поле имеет фокус ввода. Другие поля по-разному реагируют на клавиатуру. К примеру,

На некоторых страницах нужно, чтобы пользователь сразу начинал работу с какого-то из полей формы. При помощи JavaScript можно передать этому полю фокус при загрузке документа, но в HTML также есть атрибут autofocus, который приводит к тому же результату, но сообщает браузеру о наших намерениях. В этом случае браузер может отменить это поведение в подходящих случаях, например когда пользователь перевёл фокус куда-то ещё.

Браузеры по традиции позволяют пользователю перемещать фокус клавишей Tab. Мы можем влиять на порядок перемещения через атрибут tabindex. В примере документ будет переносить фокус с текстового поля на кнопку OK, вместо того, чтобы сначала пройти через ссылку help.

По умолчанию, большинство типов элементов HTML не получают фокус. Но добавив tabindex к элементу, вы сделаете возможным получение им фокуса.

Отключённые поля

Все поля можно отключить атрибутом disabled, который существует и в виде свойства элемента объекта DOM.

Отключённые поля не принимают фокус и не изменяются, и в отличие от активных, обычно выглядят серыми и выцветшими.

Когда программа находится в процессе обработки нажатия на кнопку или другой элемент, которое может потребовать общение с сервером и занять длительное время, неплохо отключать элемент до завершения действия. В этом случае, когда пользователь потеряет терпение и нажмёт на элемент ещё раз, действие не будет повторено лишний раз.

Форма в целом

Когда поле, содержится в элементе

Кнопка с атрибутом type равным submit при нажатии отправляет форму. Нажатие клавиши Enter внутри поля формы имеет тот же эффект.

Отправка формы обычно означает, что браузер переходит на страницу, обозначенную в атрибуте формы action, используя либо GET либо POST запрос. Но перед этим запускается свойство “submit”. Его можно обработать в JavaScript, и обработчик может предотвратить поведение по умолчанию, вызвав на объекте event preventDefault.

Перехват событий “submit” полезен в нескольких случаях. Мы можем написать код, проверяющий допустимость введённых значений и сразу же показать ошибку вместо передачи данных формы. Или мы можем отключить отправку формы по умолчанию и дать программе возможность самой обработать ввод, например используя XMLHttpRequest для отправки данных на сервер без перезагрузки страницы.

Текстовые поля

Функция replaceSelection заменяет текущий выделенный текст заданным словом, и перемещает курсор на позицию после этого слова, чтобы можно было продолжать печатать.

Событие “change” для текстового поля не срабатывает каждый раз при вводе одного символа. Оно срабатывает после потери полем фокуса, когда его значение было изменено. Чтобы мгновенно реагировать на изменение текстового поля нужно зарегистрировать событие “input”, которое срабатывает каждый раз при вводе символа, удалении текста или других манипуляциях с содержимым поля.

Илон Маск рекомендует:  Что такое код imagecolorclosest

В следующем примере мы видим текстовое поле и счётчик, показывающий текущую длину введённого текста.

Галочки и радиокнопки

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

Метод document.getElementsByName выдаёт все элементы с заданным атрибутом name. Пример перебирает их (посредством обычного цикла for, а не forEach, потому что возвращаемая коллекция – не настоящий массив) и регистрирует обработчик событий для каждого элемента. Помните, что у объектов событий есть свойство target, относящееся к элементу, который запустил событие. Это полезно для создания обработчиков событий – наш обработчик может быть вызван разными элементами, и у него должен быть способ получить доступ к текущему элементу, который его вызвал.

Поля select

Поля select похожи на радиокнопки – они также позволяют выбрать из нескольких вариантов. Но если радиокнопки позволяют нам контролировать раскладку вариантов, то вид поля

В большинстве браузеров внешний вид поля будет отличаться от поля с единственным вариантом выбора, который обычно выглядит как выпадающее меню.

Атрибут size тега используется для задания количества вариантов, которые видны одновременно – так вы можете влиять на внешний вид выпадушки. К примеру, назначив size 3, вы увидите три строки одновременно, безотносительно того, присутствует ли опция multiple.

У каждого тега есть значение. Его можно определить атрибутом value, но если он не задан, то значение тега определяет текст, находящийся внутри тега .. . Свойство value элемента отражает текущий выбранный вариант. Для поля с возможностью выбора нескольких вариантов это свойство не особо нужно, т.к. в нём будет содержаться только один из нескольких выбранных вариантов.

Файловое поле

Файловое поле изначально было предназначено для закачивания файлов с компьютера через форму. В современных браузерах они также позволяют читать файлы из JavaScript. Поле работает как охранник для файлов. Скрипт не может просто взять и открыть файл с компьютера пользователя, но если тот выбрал файл в этом поле, браузер разрешает скрипту начать чтение файла.

Файловое поле обычно выглядит как кнопка с надписью вроде «Выберите файл», с информацией про выбранный файл рядом с ней.

Свойство files элемента – массивоподобный объект (не настоящий массив), содержащий список выбранных файлов. Изначально он пуст. У элемента нет простого свойства file, потому что пользователь может выбрать несколько файлов за раз при включённом атрибуте multiple.

У объектов в свойстве files есть свойства имя (имя файла), размер (размер файла в байтах), и тип (тип файла в смысле media type — text/plain или image/jpeg).

Чего у него нет, так это свойства, содержащего содержимое файла. Чтобы получить содержимое, приходиться постараться. Так как чтение файла с диска занимает длительное время, интерфейс должен быть асинхронным, чтобы документ не замирал. Конструктор FileReader можно представлять себе, как конструктор XMLHttpRequest, только для файлов.

Чтение файла происходит при помощи создания объекта FileReader, регистрации события “load” для него, и вызова его метода readAsText с передачей тому файла. По окончанию загрузки в свойстве result сохраняется содержимое файла.

Пример использует Array.prototype.forEach для прохода по массиву, так как в обычном цикле было бы неудобно получать нужные объекты file и reader от обработчика событий. Переменные были бы общими для всех итераций цикла.

У FileReaders также есть событие “error”, когда чтение файла не получается. Объект error будет сохранён в свойстве error. Если вы не хотите забивать голову ещё одной неудобной асинхронной схемой, вы можете обернуть её в обещание (см. главу 17):

Возможно читать только часть файла, вызывая slice и передавая результат (т.н. объект blob) объекту reader.

Хранение данных на стороне клиента

Простые HTML-странички с добавкой JavaScript могут выступать отличной основой для мини-приложений – небольших вспомогательных программ, автоматизирующих ежедневные дела. Присоединив к полям формы обработчики событий вы можете делать всё – от конвертации фаренгейтов в цельсии до генерации паролей из основного пароля и имени веб-сайта.

Когда такому приложению нужно сохранять информацию между сессиями, переменные JavaScript использовать не получится – их значения выбрасываются каждый раз при закрытии страницы. Можно было бы настроить сервер, подсоединить его к интернету и тогда приложение хранило бы ваши данные там. Это мы разберём в главе 20. Но это добавляет вам работы и сложности. Иногда достаточно хранить данные в своём браузере. Но как?

Можно хранить строковые данные так, что они переживут перезагрузку страниц — для этого надо положить их в объект localStorage. Он разрешает хранить строковые данные под именами (которые тоже являются строками), как в этом примере:

Переменная в localStorage хранится, пока её не перезапишут, удаляется при помощи removeItem или очисткой локального хранилища пользователем.

У сайтов с разных доменов – разные отделения в этом хранилище. То есть, данные, сохранённые с вебсайта в localStorage, могут быть прочтены или перезаписаны только скриптами с этого же сайта.

Также браузеры ограничивают объём хранимых данных, обычно в несколько мегабайт. Это ограничение, вкупе с тем фактом, что забивание жёстких дисков у людей не приносит прибыли, предотвращает отъедание места на диске.

Следующий код реализует простую программу для ведения заметок. Она хранит заметки в виде объекта, ассоциируя заголовки с содержимым. Он кодируется в JSON и хранится в localStorage. Пользователь может выбрать записку через поле

Скрипт инициализирует переменную notes значением из localStorage, а если его там нет – простым объектом с одной записью «что купить». Попытка прочесть отсутствующее поле из localStorage вернёт null. Передав null в JSON.parse, мы получим null обратно. Поэтому для значения по умолчанию можно использовать оператор || .

Когда данные в note меняются (добавляется новая запись или меняется текущая), для обновления хранимого поля вызывается функция saveToStorage. Если б мы рассчитывали, что у нас будут храниться тысячи записей, это было бы слишком накладно, и нам пришлось бы придумать более сложную процедуру для хранения – например, своё поле для каждой записи.

Когда пользователь добавляет запись, код должен обновить текстовое поле, хотя у поля и есть обработчик “change”. Это нужно потому, что событие “change” происходит, только когда пользователь меняет значение поля, а не когда это делает скрипт.

Есть ещё один похожий на localStorage объект под названием sessionStorage. Разница между ними в том, что содержимое sessionStorage забывается по окончанию сессии, что для большинства браузеров означает момент закрытия.

HTML предоставляет множество различных типов полей формы – текстовые, галочки, множественного выбора, выбора файла.

Из JavaScript можно получать значение и манипулировать этими полями. По изменению они запускают событие “change”, по вводу с клавиатуры – “input”, и ещё много разных клавиатурных событий. Они помогают нам отловить момент, когда пользователь взаимодействует с полем ввода. Свойства вроде value (для текстовых полей и select) или checked (для галочек и радиокнопок) используются для чтения и записи содержимого полей.

При передаче формы происходит событие “submit”. Обработчик JavaScript затем может вызвать preventDefault этого события, чтобы остановить передачу данных. Элементы формы не обязаны быть заключены в теги

Автодополнение

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

Игра «Жизнь» Конвея

Это простая симуляция жизни на прямоугольной решётке, каждый элемент которой живой или нет. Каждое поколение (шаг игры) применяются следующие правила:

— каждая живая клетка, количество соседей которой меньше двух или больше трёх, погибает
— каждая живая клетка, у которой от двух до трёх соседей, живёт до следующего хода
— каждая мёртвая клетка, у которой есть ровно три соседа, оживает

Илон Маск рекомендует:  Лекции по конструированию компиляторов глава 4 промежуточные представления программы

Соседи клетки – это все соседние с ней клетки по горизонтали, вертикали и диагонали, всего 8 штук.

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

Как отследить нажатие Ctrl+Enter с помощью jQuery?

Главная >> Frontend >> Как отследить нажатие Ctrl+Enter с помощью jQuery?

Как отследить нажатие Ctrl+Enter с помощью jQuery?

jQuery позволяет очень просто отслеживать комбинации клавиш. В этой статье — пример, как отследить нажатие Ctrl+Enter .на jQuery.

На самом деле всё очень просто. Нам нужно использовать событие keydown и event, который генериурет нам jQuery.

Например, если нам нужно отследить нажатие Ctrl+Enter на всех textarea :

Сначала мы подключаем наш обработчик на все нажатия клавиш на селекторе textarea. После этого, используя свойства event убеждаемся, что была нажата клавиша Ctrl (e.ctrlKey) и также был нажат Enter (e.keyCode == 13).

Если оба условия положительны — мы можем выполнять наши действия.

Если, к примеру, Вам нужно добавить обработчик на всю страницу — укажите в селекторе document :

Как поймать событие нажатия Enter в поле input

Дата публикации: 2015-11-11

От автора: этот простой кусочек кода демонстрирует, как перехватить значение текстового поля при нажатии клавиши Enter – в vanilla JS и JQuery.

Вступление

Пару недель назад мой друг попросил разобраться с маленькой проблемой. Ему было нужно захватить значение текстового поля каждый раз, когда пользователь в него что-то вводит и нажимает на Enter. С такими современными фреймворками как Angular и React это пустячное дело, так как в них встроена привязка данных. Конечно же, никто не пошел по такому пути. К счастью и без данных фреймворков код оказался очень прост. Ниже я представил два кусочка кода – первый на JS, второй на JQuery. В основе обоих лежит определение текстового поля:

Объединенный Открытый Проект

Сайт для Настоящих Компьютерщиков

Сейчас просматривают эту тему:

а также: 1 гость, 0 скрытых пользователей.

Последние
Что лучше ноутбук или обычный ПК?
Хочу asus zenfone 5
Борьба со спамом на форуме
Тотализатор апдейтов Яндекса
Сайт по соционике

Самые активные 5 т

Случайные статьи

Объединенный Открытый Проект » Дизайн, HTML, CSS, JavaScript » Отправка формы по Ctrl+Enter

Отправка формы по Ctrl+Enter

Как сделать на JS?

Руководитель Проекта
Настоящий Компьютерщик

Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79

Дата регистрации на форуме:
29 сен. 2001

Руководитель Проекта
Настоящий Компьютерщик

Откуда: Москва
Всего сообщений: 2994
Рейтинг пользователя: 79

Дата регистрации на форуме:
29 сен. 2001

Отправка формы с помощью Ctrl + Enter на javascript

Ну вот и тема для первой статьи появилась. Jquery для начинающих.

Заказчик пожелал, чтобы можно было по нажатию кнопки энтер на клавиатуре перемещаться между полями формы заказа товара и если человек дошёл до кнопки “отправить”, то по нажатию на неё “enter”-ом форма отправлялась.

Казалось бы – простая задача, но дьявол кроется в мелочах.

Итак, если бы мы имели простую и нормальную разметку, а ручки у верстальщика росли из нужного места, то форма выглядела бы примерно так:

Добавим немного css:

Как видите, здесь нет никаких лишних html тегов, что очень положительно сказывается на реализации задачи. Код простой и лаконичный:

Тадааааам! Все работает)

А теперь поясню построчно.

В первой строчке мы выбираем все поля, по которым будем перемещаться – это все input, форма комментария textarea и кнопка отправки формы buttom. На реальном проекте нужно выбирать по id формы или по классам полей, но для простоты понимания выборка происходит по именам тегов.

Во второй строчке мы устанавливаем обработчик ввода символа с клавиатуры .keypress на все выбранные нами поля. Он срабатывает на любой ввод с клавиатуры.

Третья строчка – проверка на соответствие нажатой клавиши. Нам нужен энтер, которому присвоен код 13.

В большинстве случаев, стандартное поведение при нажатии “enter” – отправка формы. Нам это не нужно, поэтому сбрасываем стандартное поведение – event.preventDefault().

Дальше идет проверка – если это кнопка отправки формы, то мы имитируем клик по ней с помощью конструкции $(this).click(). Можно было бы отправить форму и такой конструкцией $(this).form.submit(), но тогда бы не сработали стандартные html проверки полей на заполнение.

Последним действием идет выбор следующего элемента с помощью .next() и установка на нем фокуса с помощью .focus() В данном случае переходы работают.

А если верстка не такая простая? Если input-ы обёрнуты в div-ы, да еще в label? Как сделать переход на следующий input, ведь функция .next() выберет только следующий элемент на странице и это явно будет не input? Можно попробовать извернуться с .parent, если все input в одинаковых обертках. Но если они по разному расположены в шаблоне, то писать под каждый input свой выход наверх – извращение ещё то))

Мне как раз попался такой шаблон – смотрел и плакал)) Даже не пытайтесь понять, зачем все эти div и table, а за стили в коде руки бы поотрывал. Но заказчика не выбирают, поэтому приступим.

С такой разметкой поменяем немного css:

А теперь напишем jquery скрипт так, что нам будет без разницы расположение input и всех нужных нам полей в коде формы.

В первой строчке мы создаем html коллекцию из нужных нам элементов input, textarea и кнопки button. Кстати, если обратите внимание на html разметку, то там присутствует input для внутренних целей с type = “h >

Далее, как и в предыдущем примере, на все выбранные элементы мы вешаем обработчик нажатий .keypress, после чего проверяем, нажат ли “enter”. Если он нажат, то сбрасываем стандартное поведение элемента event.preventDefault().

Ну вот теперь мы подошли к главному. В коллекции $elements каждому элементу присвоен порядковый номер – index. Jquery функция .eq() умеет выбирать элемент из коллекции с нужным нам индексом. В this находится элемент, на котором произошло нажатие “enter”. Значит index следующего элемента будет index(this) + 1. Записываем этот элемент в переменную $next = $elements.eq($elements.index(this) + 1);

Дальше опять проверяем, не кнопка ли это отправки формы и если да, то кликаем на нее $(this).click(). Если это не кнопка, то переводим фокус на элемент, записанный в переменной $next.

А вот и результат:

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

Если у Вас есть более изящные решения или хотите закидать меня тухлыми помидорами, то милости просим в комментарии)) Я буду только рад критике и полезным советам.

Как с помощью JavaScript (JQuery) кроссбраузерно отправить данные формы по нажатию Ctrl+Enter?

Вот этот код у меня успешно работает в Firefox, но не работает в Chrome:

Примечание:
>> В некоторых браузерах по этому действию выолняются собственные функции браузера.
Тогда как же быть?

Может быть имеет смысл сделать Shift+Enter «заменой» простому Enter, а на Enter посадить сабмит? Так ВКонтакте сделано

Примечание:
Решил сделать на shift+enter:

RPI.su — самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected] . Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL