Горячие клавиши. Отправка по нажатию 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>

Вот и всё!

Исходники

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