Начало Горячие клавиши на JavaScript
16 апреля 2016
1896
горячие клавиши javascript

Горячие клавиши на JavaScript

Сложность Рубрика JavaScript Браузеры
Демонстрация » Скачать »

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

 

Что такое горячие клавиши? 

 

Возможно, имеются люди, которые задаются этим вопросом, что же такое горячие клавиши? Отвечу Вам просто, на обычном примере. Допустим, Вы печатаете текст в поле textarea, затем нажимаете клавишу Enter и при ее нажатии режим каретки переходит вниз, но вместо этого Вам нужно, чтобы письмо уже отправлялось. Для этого существует код каждой клавиши, которую можно вызвать запросом, отсюда и название - горячие клавиши. То есть, с помощью одной клавиши, Вы можете перепрограммировать сам запрос обращений к исходному элементу. Реализуется данный функционал с помощью языка веб программирования JavaScript

 

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

Кто же не пользуется социальной сетью, то ниже приведен скриншот данного скрипта.

 

Горячие клавиши RootHelp.ru

 

 

Первый шаг. HTML. CSS. 

 

Начинаем с первого шага и подключаем наш скрипт горячих клавиш dershortcut.js, а также не забываем про стили demo.css.

 

<script src="js/dershortcut.js"></script>
<link type="text/css" rel="stylesheet" href="css/demo.css"> 

 

Теперь нам потребуется создать форму, в которой будет для примера, три поля - имя, фамилия и сообщение. Обработчика для данной формы я не делал, так как мы пока что, только знакомимся с применением горячих клавиш. 

 

<form name="form"> 
	<fieldset>
	<label>Имя</label>
	<input type="text" onKeyPress="return KeyPress(event, 2);">
	<label>Фамилия</label>
    <input type="text" onKeyPress="return KeyPress(event, 3);">
	<label>Сообщение</label>
	<textarea type="text" id="text" rows="10" onkeydown="keyDown(event)" onkeyup="keyUp(event)"></textarea>	
	<input type="submit" id="button">		
	</fieldset>
</form>	

 

Заметьте, что сначала создается форма с обязательным именем form, тег атрибута fieldset тоже является обязательным, так как без него поля при нажатии на клавишу Enter не будет переключаться должным образом между собой, используя событие клавиатуры onKeyPress. У каждого поля, как видим имеется свое значение и функция. Для поля textarea также имеются события перехвата ввода с клавиатуры onKeyDown и onKeyUp, но с ними мы познакомимся позже, во втором шаге, где подробно расписан код JavaScript. Кстати, не забываем предать стили нашей форме, чтобы она корректно отображались.

 

#content{
	padding: 50px;
	margin: 0 auto;
	width: 300px;
}

input[type="text"], textarea{
	width: 300px;
	border: 1px solid #000000;
	padding:10px;
	margin-bottom: 10px;
}

input[type="submit"]{
	border:none;
	background: none;
	color:#FFFFFF;
}

fieldset{
	border: none;
}

 

Второй шаг. JavaScript.

 

Переходим ко второму шагу и тут мы ознакомимся с принципом реализация JavaScript кода для назначения горячих клавиш. И так, для этого я создал специально четыре переменные, которые являются нашими часто применяемыми клавишами. Первая переменная enter в которой находится число 13. Так вот, данное число и является кодом данной клавиши при нажатии. Остальные тоже аналогично - shift, ctrlalt и capslock. Перед этим нам необходимо прописать функцию KeyDown со значением event, которая будет относиться к полю textarea по событию onKeyDown.

 

function keyDown(event){
Скрипт тут...
}

 

var enter = 13;
var shift = 16;
var ctrl = 17;
var alt = 18;

 

Далее создаем переменную text и записываем в нее получение от поля textarea, какой-либо передачи данных при введении и отправке текста. В поле идентификатора text, также не забываем убрать лишние переносы строк с помощью функции replace.

 

var text = document.getElementById("text").value;
text = text.replace(/\s/g, '');

 

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

 

event = event || window.event;
if(event.keyCode != enter && event.keyCode != shift && event.keyCode != ctrl && event.keyCode != alt && event.keyCode != capslock) { 
	return; 
}
if (event.preventDefault) {   
	event.preventDefault();
} 
else {  
	event.returnValue = false;
}

 

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

 

if(event.keyCode == enter  && text.length > 0){
	document.getElementById("button").click();
}

 

Теперь можем смело переходить к другим горячим клавишам, таким как alt, shift, ctrl и capslock. Для начала нам потребуется условие, которое будет утверждать значение нажатой клавиши capslock.

 

if(event.keyCode == 20){
	capslock = true;
}

 

Далее при нажатии клавиши ctrl мы добавляем в поле textarea теги <p></p>, при нажатии alt добавляем тег переноса </br>, при сочетании нажатий двух клавиш shift и capslock мы добавляем текст "ROOTHELP.RU - СКРИПТЫ ДЛЯ САЙТА!".

 

else if(event.keyCode == ctrl){
	document.getElementById("text").value += "<p></p>";
}
else if(event.keyCode == alt){
	document.getElementById("text").value += "</br>";
}
else if(event.keyCode == shift && capslock){
	document.getElementById("text").value += "ROOTHELP.RU - СКРИПТЫ ДЛЯ САЙТА!";
}

 

Теперь перейдем к функции keyUp со значением event. Она нужна нам исключительно для отката действий или сброса при нажатии клавиш.

К примеру, теперь нам нужно отменить нажатую клавишу capslock для этого пропишем.

 

function keyUp(event){
	if(event.keyCode == capslock){
		capslock = false;
	}
}

 

И на последок, не плохо было бы сделать переключения между полями - имя, фамилия, сообщения через клавишу Enter. Делается это все через функцию KeyPress с двумя значениями event и fields. Первое общение значение KeyCode, а второе используется для конкретного поля. Уместно употребить тут событие focus, ведь с помощью него и скрипт переключается между элементами полей. 

 

function KeyPress(event,fields)
{
	var keys = navigator.appName == "Netscape" ? event.which : event.keyCode;
	var enter = 13;
        if (keys == enter){
			document.form.elements[fields].focus();
			return false
        }
    return true
}

 

Не забываем особое внимание уделять над работой скрипта в разных браузерах, ведь для этого нужно все детально отлаживать. Изучая и практикуясь на данных примерах, Вы сможете полноценно понять, как работают данные события и уже тогда мы перейдем к теме как в контакте, над реализацией перехода между горячими клавишами. Весь код я привел ниже, чтобы было удобней Вам ознакомиться.

 

function keyDown(event){
	var enter = 13;
	var shift = 16;
	var ctrl = 17;
	var alt = 18;
	
	var text = document.getElementById("text").value;
	text = text.replace(/\s/g, '');
	if(event.keyCode == 20){
		capslock = true;
	}
	event = event || window.event;
		if(event.keyCode != enter && event.keyCode != shift && event.keyCode != ctrl && event.keyCode != alt && event.keyCode != capslock) 
		{ 
			return; 
		}
		if (event.preventDefault) {   
				event.preventDefault();
		} 
		else 
			{  
			event.returnValue = false;
		}
	if(event.keyCode == enter  && text.length > 0){
		document.getElementById("button").click();
	}
	else if(event.keyCode == ctrl){
		document.getElementById("text").value += "<p></p>";
	}
	else if(event.keyCode == alt){
		document.getElementById("text").value += "</br>";
	}
	else if(event.keyCode == shift && capslock){
		document.getElementById("text").value += "ROOTHELP.RU - СКРИПТЫ ДЛЯ САЙТА!";
	}
}
function keyUp(event){
	if(event.keyCode == capslock){
		capslock = false;
	}
}
function KeyPress(event,fields)
{
	var keys = navigator.appName == "Netscape" ? event.which : event.keyCode;
	var enter = 13;
        if (keys == enter){
			document.form.elements[fields].focus();
			return false
        }
    return true
}

 

А на этом все, благодарю всех за внимание, прощаюсь не надолго. Всем удачи!





Роман Краутер