Горячие клавиши. Отправка по нажатию Ctrl+Enter

Как часто при работе за компьютером вы используете горячие клавиши? Лично я очень часто. На мой взгляд, это сильно экономит время. При работе с текстом, когда неудобно каждый раз отрывать руки от клавиатуры и тянутся к мышке, лишь затем, чтобы сделать пару кликов, они незаменимы. В текстовых редакторах и других программах пользователю, как правило, предоставляется возможность использовать горячие клавиши, но как быть, если вы набираете сообщение в текстовом поле на страничке в Интернете и после его набора необходимо кликнуть на кнопку “Отправить”, что неудобно, когда, например, это действие надо проделывать много раз. Любой браузер, конечно, поддерживает использование горячих клавиш, но функции, которые вызываются их нажатием, обычно не могут оперировать с содержимым страницы. Для этого, чаще всего, используется JavaScript. С его помощью можно обрабатывать нажатие, а точнее, нажатие и отпускание клавиш, и имитировать клик по кнопке, чего достаточно, чтобы написать скрипт для отправки сообщения по нажатию, скажем, сочетания клавиш ctrl+enter, что я и предлагаю сделать.

Итак, приступим. Для проверки работоспособности скрипта нам понадобится форма, содержащая текстовое поле, в которое пользователь будет вводить своё сообщение, и тэг input с атрибутом type, имеющим значение submit. По клику на эту кнопку сообщение будет отправляться на сервер. В атрибутах тега form должен быть прописан метод отправки сообщения на сервер (в нашем случае обычно используют метод POST) и путь к php скрипту, который будет обрабатывать полученное сообщение.

В файле index.html будет располагаться следующий код:

1
2
3
4
5
6
7
8
9
10
11
<html>
	<head>
		<title>Ctrl+Enter</title>
	</head>
	<body>
		<form method="POST" action="action.php">
			<textarea id="mess" name="mess"></textarea>
			<input type="submit" id="go" />			
		</form>		
	</body>
</html>

Для демонстрации работы нашего js-скрипта достаточно, чтобы php-скрипт просто выводил отправленное сообщение на страницу. Поэтому в файле action.php достаточно написать:

<? echo $_POST['mess']; ?>

Для того чтобы сообщение отправилось на сервер при нажатии комбинации клавиш ctrl+enter нужно сымитировать клик по кнопке “Отправить“. Для этого обратимся к кнопке в форме используя её id и сымитируем клик по ней используя метод click() вот так:

document.getElementById(“buttonId”).click()

где buttonId — это значение атрибута id кнопки. Кроме того, нам необходимо чтобы клик имитировался, когда пользователь держит нажатой клавишу ctrl и нажимает enter. Для того, чтобы отслеживать, нажата ли клавиша ctrl введём переменную ctrl и каждый раз, когда пользователь будет нажимать любую клавишу, будем вызывать функцию, в теле которой, если нажата клавиша ctrl(ей соответствует код 17) будем присваивать переменной сtrl значение true. В этой же функции, назовём её keyDown, будем имитировать клик, если значение ctrl равно true т.е пользователь держит нажатой клавишу ctrl, и нажата клавиша enter. Код нажимаемой клавиши содержится в объекте event, который мы будем передавать функции keyDown в качестве параметра. В итоге функция keyDown выглядит так:

1
2
3
4
5
6
7
8
9
function keyDown(e){ // В качестве параметра будем передавать объект event
/* Если нажата клавиша ctrl, то присваиваем соответствующей переменной значение true*/
	if(e.keyCode == 17)
		ctrl = true;
// Иначе, если пользователь держит нажатой клавишу ctrl и нажимает enter
else if(e.keyCode == 13 && ctrl)
// то имитируем щелчок по кнопке с id="go"
document.getElementById("go").click();
}

Каждый раз, когда пользователь будет отпускать какую-нибудь клавишу, будем вызывать функцию keyUp и в качестве параметра будем передавать ей объект event. В точности, как в случаи с keyDown. В теле функции, если пользователь отпускает клавишу ctrl ,будем присваивать соответствующей переменной значение false.

1
2
3
4
function keyUp(e){
	if(e.keyCode == 17) // Если пользователь отпускает ctrl
		ctrl = false;
}

Функции keyUp(e) и keyDown(e) запишем в файл с именем script.js и сохраним его. Добавляем обработчики событий onkeydown и onkeyup к тэгу с id=”mess” c вызваемыми внутри них соответствующими функциями и подгружаем JavaScript-код из файла script.js. В итоге содержимое файла index.html выглядит вот так:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
	<head>
		<title>Ctrl+Enter</title>
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<form method="POST" action="action.php">
			<textarea id="mess" name="mess" onkeydown="keyDown(event)" onkeyup="keyUp(event)">				
			</textarea>
			<input type="submit" id="go" />			
		</form>		
	</body>
</html>

Вот и всё!

Исходники

Позднее я расскажу, как предотвращать отправку пустых сообщений на сервер. До встречи 😉

  • Горячие клавиши весьма удобная вещь. Много раз замечал как профессионалы работают за ПК, они используют в основном только клаву-хот кеи и при этом скорость работы гораздо больше нежели и обычных пользователей с мышью. Как говориться необходимо учить матчасть))

  • Те, кто пользуются порячими клапишами, между полями формы переходят табулятором. Соответственно, с поля сообщения на кнопку — tab, а потом enter. Но ежели ниже кнопки идёт галочка «Подписаться», которую желательно отметить, то горячие клавиши уже не помогут.

  • Княгиня, почему не помогут? Очень даже помогот. И JavaScript не понадобится. Есть такой атрибут в HTML, который называется tabindex. Он указывает в каком порядке выделяются элементы при нажатии клавишы tab. Устанавливаем tabindex кнопки больше, чем tabindex галочки и всё работате. Выглядит всё это вот так:

    <html>
    <head>
    <title>Tab</title>
    <body>
    <form action="index.php">
    <textarea id="mess"></textarea>
    <input type="submit" id="go" tabindex="2" />
    <input type="checkbox" name="subscribe" id="subscribe"
    value="subscribe" tabindex="1" />
    <label for="subscribe">Подписаться</label>
    <form>
    </body>
    </html>

    Форма, естесвенно, только для демонстрации. Комментарии не куда не летят.

  • Табиндексом я постоянно пользуюсь. Но

  • Табиндексом я постоянно пользуюсь. Проблема в том, чтобы ПОСТАВИТЬ галочку. Попасть в поле табиндексом можно (кстати, у вас оно упорно пролетает мимо и в верх страницы), а активировать его надо, кажется, пробелом, а не ентером, каковой факт ещё надо вспомнить (а я каждый раз вспоминаю заново).

    • Галочка активируется разными клавишами в разных браузерах. В опере и хроме — и пробелом, и ентером. Эксплорер по нажатию entera отправляет форму.
      Вам нужно, чтобы галочка ставилась по нажатию ентера во всех браузераз? Это можно сделать JavaScript’ом. Вешаем на галочку вот такой обработчик:

      <input type="checkbox" name="subscribe"
      id="subscribe" value="subscribe" tabindex="1"
      onkeydown="if(event.keyCode == 13) { this.checked = true; return false;}" />

      И експлорер должен ставить галочку по нажатию enter’a

      • За обработчик спасибо, может быть, пригодится.

        Что касается ентера, то он отправляет форму во ВСЕХ браузерах, но только если мы находимся в одном из полей типа input. Если мы вне формы или в поле textarea, то отправка не состоится.

        • В 11 опере не отправляет, если фокус установлен на галочке.

  • А, 11 не проверяла. Оперой вообще пользуюсь мало, только для тестирования сайтов.

  • зачем айди mess в полях, если оно ни где не используется в скрипте?

    • Взято с реального проекта — забыли убрать.

    • SoberGrim

      Ищете где приобрести надёжную гостиную в Волгограде?

      Интернет-магазин «Где Мебель» в Волгограде http://gde-mebel.com всегда готов предложить Вам широкий выбор гостиных от крупнейших мебельных производств России.

      Наш интернет-магазин поможет вам выбрать мебель, которая бы прекрасно вписывалась в Ваш интерьер, радовала глаз и при этом не тяготила кошелёк.

      Интернет каталог мебели нашего интернет-магазина в Волгограде http://gde-mebel.com/kupit/gostinuju огромен. Наш интернет магазин предлагает много мебели, предоставляя вам большой выбор гостиных под любой вкус.

      Интернет-магазин «Где Мебель» в волгограде — мы всегда Вам рады!

  • Максим Никитенко

    У меня вообще не работает

  • SoberGrim

    Где заказать ремонт холодильного оборудования?

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

    Если вы собираетесь заказать ремонт холодильного оборудования в г.Волгограде http://stroyklimat.ru34.com/services/remont_holodilnogo_oborudovaniya/ , вы можете обратиться в фирму ЭкоЮгСтройКлимат. Фирма расположена в Волгограде и производит ремонт климатического оборудования http://stroyklimat.ru34.com/remont/remont-holodilnogo-oborudovaniya/ в Волгограде.

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