Войти Регистрация

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


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

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

Шаг 1 – Шаблон

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

<!DOCTYPE html>   
<html lang="en">   
<head>   
    <meta charset="UTF-8" />   
    <title>Text Box Enter</title>   
    <style>   
      body {   
        font: 16px/1.5 helvetica-neue, helvetica, arial, san-serif;   
      }   
      textarea {   
        border: 1px solid #ccc;   
        display:block;   
        width: 250px;   
        height: 100px;   
      }   
      p {   
        border: 1px solid #ccc;   
        background: #ececec;   
        padding: 10px;   
        margin: 10px 0;   
        width: 230px;   
      }   
      button {   
        border: 1px solid #ccc;   
        background: #ececec;   
        -webkit-border-radius: 3px;   
        padding: 5px 20px;   
        margin-top:10px;   
      }   
    </style>   
</head>   
<body>   
   
</body>   
</html>  

Шаг 2 – HTML

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

<textarea id="msg"></textarea>   
<button type="submit">Post</button>   
   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>   
   
<script>   
   
</script>  

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

 Шаг 3 – JavaScript

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

$.fn.ctrlEnter = function (btns, fn) {   
  var thiz = $(this);   
      btns = $(btns);   
   
}; 

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

function performAction (e) {   
  fn.call(thiz, e);   
}

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

thiz.bind("keydown", function (e) {   
  if (e.keyCode === 13 && e.ctrlKey) {   
    performAction(e);   
    e.preventDefault();   
  }   
});   
   
btns.bind("click", performAction); 

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

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

$("#msg").ctrlEnter("button", function () {   
  $("<p></p>").append(this.val().replace(/\n/g, "<br />")).prependTo(document.body);   
  this.val("");   
}); 

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

Пример ввода ctrl + enter на js

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



Дальше: MySQL backup: автоматический бэкап MySQL на PHP


Дискуссия по теме     1 Комментарий 
Добавить комментарий
Имя 03.02.2016 в 18:22
В конце добавить получившийся код что не позволяет? Лень?
Просмотров: 8405