Статьи

jQuery на плагине экранной клавиатуры

Это переместилось сюда: экранная клавиатура jQuery

onscreen-keyboard-jquery

Привет, ребята, я наткнулся на довольно крутой плагин экранной клавиатуры, который использует jQuery для отображения клавиатуры на экране, когда пользователь нажимает на поле ввода. Это полностью настраиваемый, где вы можете изменить расположение клавиш и цветовую схему. Это похоже на клавиатуру доступности Windows и может быть использовано для повышения удобства использования вашего сайта.

Как это использовать.

  1. Скачать плагин
  2. Используйте файл demo.js в качестве основы для создания клавиатуры
  3. Подстройте настройки к раскладке клавиатуры (см. Код ниже)
  4. Настройте код CSS под свой сайт

Страница загрузки
Live Demo

Код JQuery

$(document).ready(function(){
	// standard keyboard layout
	$('.qwerty').keyboard({ layout: 'qwerty' });

	//control for num keys
	$('#num').keyboard({
layout: 'num',
		restrictInput : true, // Prevent keys not in the displayed keyboard from being typed in
		preventPaste : true, // prevent ctrl-v and right click
		autoAccept : true
});

});
 //code to setup
// Extension demos
$(function() {

	// Set up typing simulator extension on all keyboards
	$('.ui-keyboard-input').addTyping();

});

Как загрузить клавиатуру с простой гиперссылки

 // *** Hidden input example ***
// click on a link - add focus to hidden input
$('.hiddenInput').click(function(){
	$('#hidden').trigger('focus');
	return false;
});
// Initialize keyboard script on hidden input
// set "position.of" to the same link as above
$('#hidden').keyboard({
layout: 'qwerty',
	position : {
		of : $('.hiddenInput'),
		my : 'center top',
		at : 'center top'
	}
});