Наверняка вы встречали в Twitter, Facebook или Вконтакте, когда отправка формы ввода подтверждается с помощью комбинаций клавиш Ctrl + Enter. Вы видели формы, где вы пишите свой статус или сообщение, потом кликаете по кнопке отправить или сохранить. Но если вы ленивый и цените время, как и я, то вам не понравиться брать в руки мышь и нажимать на кнопку. Выше предоставленные сервисы предоставляют такие удобства для нас. Давайте создадим подобный сценарий отправки формы с помощью нажатия Ctrl + Enter на собственном проекте с помощью языка javascript.

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

Шаг 1 – Шаблон

Мы не будем останавливаться на HTML и CSS, так как сейчас это не наша задача. Просто предоставим вам ниже HTML шаблон нашего примера.

Шаг 2 – HTML

Нам необходимо всего лишь несколько элементов для реализации ввода с помощью Control + Enter.

Код примера очень упрощен: мы имеем только textarea и кнопку button. Далее в коде мы подключаем библиотеку jQuery, которая нам необходима для использования, и создаем теги script, между которыми будет помещен наш javascript код.

 Шаг 3 – JavaScript

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

В данном коде предоставлены два параметра. Первый параметр, это строка с одним или больше селекторами, которые мы будем передавать в библиотеку jQuery. Это элементы при нажатии которых будут выполнятся определенные действия, а точнее это наша комбинация клавиш Ctrl+Enter. Второй параметр, это функция которая будет вызываться при нажатии Ctrl + Enter. Далее мы создаем переменные: jQueryified textarea и jQueryified btns.

Далее, мы создадим функцию которая вызывает другую функцию. Мы делаем это потому, чтобы быть уверенными в том, что функция вызовется с элемента textarea методом this заключенным в функцию. Также передаем объект события из события.

Далее, мы имеем обработчики фактов событий. Сначала мы регистрируем событие keydown в textarea элементе. e.keyCode === 13 означает, что клавиша Enter будет нажатой. Если e.ctrlKey true, это значит, что пользователь нажал кнопку Ctrl до того как нажал Enter. Если клавиша Ctrl нажата вместе с Enter, мы вызываем функцию performAction. Далее мы вызываем e.preventDefault, которая будет предотвращать добавление переноса строки при естественном нажатии Enter.

И сейчас, давайте создадим обработчик событий на нажатие кнопок Ctrl+Enter; Это просто, мы заменим все сущности \n на <br/>, возьмем наш текст в параграф и добавим текст в тело документа.

А теперь протестируем, что у нас получилось.

Отлично мы создали отправку формы на javascript с помощью нажатия Ctrl+Enter.

Источник:  sitear.ru