- → Программирование
- → JavaScript
- → Статьи
Отправка формы с помощью 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("");
});
А теперь протестируем, что у нас получилось.
Отлично мы создали отправку формы на javascript с помощью нажатия Ctrl+Enter. Если есть другие варианты реализации подобного дела, пишем в комментариях.
Дальше: MySQL backup: автоматический бэкап MySQL на PHP
Development — Taras Moroz