Skip to content

Commit

Permalink
Initial release.
Browse files Browse the repository at this point in the history
  • Loading branch information
@chriscook
chriscook committed Jan 15, 2012
0 parents commit 013dce0
Show file tree
Hide file tree
Showing 5 changed files with 477 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
jquery.ui.draggable.js
57 changes: 57 additions & 0 deletions demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<title>On screen keyboard</title>
<link rel="stylesheet" type="text/css" href="onScreenKeyboard.css">
<style>
html {
font-family: Calibri, Arial, sans-serif;
}

#input_container {
width: 50%;
margin: 2% auto;
display: block;
}

#input_container > input,
#input_container > textarea {
font-family: inherit;
font-size: 3em;
width: 98%;
display: block;
resize: none;
margin-bottom: 1em;
border: 1px solid #333;
padding: 0.25em;
background: #FEFEFE;
}
</style>
</head>

<body>

<form id="input_container" action="demo.html">
<input type="text" id="input1" class="osk-trigger" placeholder="disable return" data-osk-options="disableReturn">
<input type="text" id="input2" class="osk-trigger" placeholder="disable symbols" data-osk-options="disableSymbols">
<input type="text" id="input3" class="osk-trigger" placeholder="enable everything">
<textarea id="input4" class="osk-trigger" placeholder="enable everything"></textarea>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.onScreenKeyboard.js"></script>
<script>
$(document).ready(function() {
$('form#input_container').children('.osk-trigger').onScreenKeyboard({
rewireReturn : 'submit',
rewireTab : true
});
});
</script>

</body>

</html>
224 changes: 224 additions & 0 deletions jquery.onScreenKeyboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
/*
* On Screen Keyboard jQuery Plugin version 1.0
* Chris Cook - [email protected]
*/

(function($) {

'use strict';

$.fn.onScreenKeyboard = function (options) {

$('body').append('<ul id="osk-container"><li class="osk-dragger osk-last-item">:&thinsp;:</li><li class="osk-symbol"><span class="osk-off">&acute;</span><span class="osk-on">#</span></li><li class="osk-number"><span class="osk-off">1</span><span class="osk-on">!</span></li><li class="osk-number"><span class="osk-off">2</span><span class="osk-on">&quot;</span></li><li class="osk-number"><span class="osk-off">3</span><span class="osk-on">&pound;</span></li><li class="osk-number"><span class="osk-off">4</span><span class="osk-on">$</span></li><li class="osk-number"><span class="osk-off">5</span><span class="osk-on">%</span></li><li class="osk-number"><span class="osk-off">6</span><span class="osk-on">^</span></li><li class="osk-number"><span class="osk-off">7</span><span class="osk-on">&amp;</span></li><li class="osk-number"><span class="osk-off">8</span><span class="osk-on">*</span></li><li class="osk-number"><span class="osk-off">9</span><span class="osk-on">(</span></li><li class="osk-number"><span class="osk-off">0</span><span class="osk-on">)</span></li><li class="osk-symbol"><span class="osk-off">-</span><span class="osk-on">_</span></li><li class="osk-symbol"><span class="osk-off">=</span><span class="osk-on">+</span></li><li class="osk-backspace osk-last-item">backspace</li><li class="osk-tab">tab</li><li class="osk-letter">q</li><li class="osk-letter">w</li><li class="osk-letter">e</li><li class="osk-letter">r</li><li class="osk-letter">t</li><li class="osk-letter">y</li><li class="osk-letter">u</li><li class="osk-letter">i</li><li class="osk-letter">o</li><li class="osk-letter">p</li><li class="osk-symbol"><span class="osk-off">[</span><span class="osk-on">{</span></li><li class="osk-symbol"><span class="osk-off">]</span><span class="osk-on">}</span></li><li class="osk-symbol osk-last-item"><span class="osk-off">\\</span><span class="osk-on">|</span></li><li class="osk-capslock">caps lock</li><li class="osk-letter">a</li><li class="osk-letter">s</li><li class="osk-letter">d</li><li class="osk-letter">f</li><li class="osk-letter">g</li><li class="osk-letter">h</li><li class="osk-letter">j</li><li class="osk-letter">k</li><li class="osk-letter">l</li><li class="osk-symbol"><span class="osk-off">;</span><span class="osk-on">:</span></li><li class="osk-symbol"><span class="osk-off">\'</span><span class="osk-on">@</span></li><li class="osk-return osk-last-item">return</li><li class="osk-shift">shift</li><li class="osk-letter">z</li><li class="osk-letter">x</li><li class="osk-letter">c</li><li class="osk-letter">v</li><li class="osk-letter">b</li><li class="osk-letter">n</li><li class="osk-letter">m</li><li class="osk-symbol"><span class="osk-off">,</span><span class="osk-on">&lt;</span></li><li class="osk-symbol"><span class="osk-off">.</span><span class="osk-on">&gt;</span></li><li class="osk-symbol"><span class="osk-off">/</span><span class="osk-on">?</span></li><li class="osk-hide osk-last-item">hide keyboard</li><li class="osk-space osk-last-item">space</li></ul>');

var settings = $.extend({
draggable : false,
rewireReturn : false,
rewireTab : false,
topPosition : '20%',
leftPosition : '30%'
}, options),
$keyboardTriggers = this,
$input = $(),
$keyboard = $('ul#osk-container'),
$keys = $keyboard.children('li'),
$letterKeys = $keyboard.children('li.osk-letter'),
$symbolKeys = $keyboard.children('li.osk-symbol'),
$numberKeys = $keyboard.children('li.osk-number'),
$returnKey = $keyboard.children('li.osk-return'),
$tabKey = $keyboard.children('li.osk-tab'),
shift = false,
capslock = false,
inputOptions = [],
browserInPercent = $tabKey.css('marginRight').indexOf('%') > -1;

/**
* Focuses and customises the keyboard for the current input object.
* @param {jQueryObject} The input object to focus on.
*/
function activateInput($input) {
var inputOptionsString = $input.attr('data-osk-options');
$keys.removeClass('osk-disabled');
$keyboardTriggers.removeClass('osk-focused');
if (inputOptionsString !== undefined) {
inputOptions = inputOptionsString.split(' ');
if ($.inArray('disableSymbols', inputOptions) > -1) {
$symbolKeys.addClass('osk-disabled');
}
if ($.inArray('disableTab', inputOptions) > -1) {
$tabKey.addClass('osk-disabled');
}
if ($.inArray('disableReturn', inputOptions) > -1) {
$returnKey.addClass('osk-disabled');
}

}
$input.addClass('osk-focused').focus();
}

/**
* Fixes the width of the keyboard in browsers which round down part-pixel values (all
* except Firefox). Most browsers which do this return CSS margins in pixels rather than
* percent, so this is used to determine whether or not to use this function. Opera does not
* however, so for now this function does not work in that browser.
*/
function fixWidths() {
var $key = $(),
keyboardWidth = $keyboard.width(),
totalKeysWidth = 0,
currentKeyWidth,
difference;
if (browserInPercent) {
$keys.each(function () {
$key = $(this);
if (!$key.hasClass('osk-dragger') && !$key.hasClass('osk-space')) {
totalKeysWidth += $key.width() + Math.floor((parseFloat($key.css('marginRight')) / 100) * keyboardWidth);
if ($key.hasClass('osk-last-item')) {
difference = keyboardWidth - totalKeysWidth;
if (difference > 0) {
$key.width($key.width() + difference);
}
difference = 0;
totalKeysWidth = 0;
}
currentKeyWidth = 0;
}
});
}
}

if (settings.draggable && jQuery.ui) {
$keyboard.children('li.osk-dragger').show();
$keyboard.css('paddingTop', '0').draggable({
containment : 'document',
handle : 'li.osk-dragger'
});
}

if (settings.rewireReturn) {
$returnKey.html(settings.rewireReturn);
}

$keyboard.css('top', settings.topPosition).css('left', settings.leftPosition);

fixWidths();

$keyboard.hide().css('visibility', 'visible');

$(window).resize(function() {
fixWidths();
});

$keyboardTriggers.click(function() {
$input = $(this);
activateInput($input);
$keyboard.fadeIn('fast');
});

$keyboard.on('click', 'li', function() {
var $key = $(this),
character = $key.html(),
inputValue,
indexOfNextInput;

// Disabled keys/dragger
if ($key.hasClass('osk-dragger') || $key.hasClass('osk-disabled')) {
$input.focus();
return false;
}

// 'Hide Keyboard' key
if ($key.hasClass('osk-hide')) {
$keyboard.fadeOut('fast');
$input.blur();
$keyboardTriggers.removeClass('osk-focused');
return false;
}

// 'Shift' key
if ($key.hasClass('osk-shift')) {
$letterKeys.toggleClass('osk-uppercase');
$.merge($symbolKeys.children('span'), $numberKeys.children('span')).toggle();
if ($symbolKeys.hasClass('osk-disabled')) {
$numberKeys.toggleClass('osk-disabled');
}
shift = !shift;
capslock = false;
return false;
}

// 'Caps Lock' key
if ($key.hasClass('osk-capslock')) {
$letterKeys.toggleClass('osk-uppercase');
capslock = true;
return false;
}

// 'Backspace' key
if ($key.hasClass('osk-backspace')) {
inputValue = $input.val();
$input.val(inputValue.substr(0, inputValue.length - 1));
return false;
}

// Symbol/number keys
if ($key.hasClass('osk-symbol') || $key.hasClass('osk-number')) {
character = $('span:visible', $key).html();
}

// Spacebar
if ($key.hasClass('osk-space')) {
character = ' ';
}

// 'Tab' key - either enter an indent (default) or switch to next form element
if ($key.hasClass('osk-tab')) {
if (settings.rewireTab) {
indexOfNextInput = $keyboardTriggers.index($input) + 1;
if (indexOfNextInput < $keyboardTriggers.length) {
$input = $($keyboardTriggers[indexOfNextInput]);
} else {
$input = $($keyboardTriggers[0]);
}
activateInput($input);
return false;
} else {
character = '\t';
}
}

// 'Return' key - either linebreak (default) or submit form
if ($key.hasClass('osk-return')) {
if (settings.rewireReturn) {
$keyboardTriggers.parent('form').submit();
return false;
} else {
character = '\n';
}
}

// Uppercase keys
if ($key.hasClass('osk-uppercase')) {
character = character.toUpperCase();
}

// Handler for when shift is enabled
if (shift) {
$.merge($symbolKeys.children('span'), $numberKeys.children('span')).toggle();
if (!capslock) {
$letterKeys.toggleClass('osk-uppercase');
}
if (settings.disableSymbols) {
$numberKeys.toggleClass('osk-disabled');
}
shift = false;
}

$input.focus().val($input.val() + character);
});

return this;

};

})(jQuery);
Loading

0 comments on commit 013dce0

Please sign in to comment.