Это переместилось сюда: экранная клавиатура jQuery
Привет, ребята, я наткнулся на довольно крутой плагин экранной клавиатуры, который использует jQuery для отображения клавиатуры на экране, когда пользователь нажимает на поле ввода. Это полностью настраиваемый, где вы можете изменить расположение клавиш и цветовую схему. Это похоже на клавиатуру доступности Windows и может быть использовано для повышения удобства использования вашего сайта.
Как это использовать.
- Скачать плагин
- Используйте файл demo.js в качестве основы для создания клавиатуры
- Подстройте настройки к раскладке клавиатуры (см. Код ниже)
- Настройте код CSS под свой сайт
Код 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'
}
});