Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

101 lines (81 sloc) 3.497 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Navigation Demo</title>
<!-- demo -->
<link href="demo/demo.css" type="text/css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link rel="stylesheet" href="css/keyboard.css">
<script src="js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!-- <script src="js/jquery.keyboard.extension-typing.js"></script> -->
<!-- <script src="js/jquery.keyboard.extension-autocomplete.js"></script> -->
<script src="js/jquery.keyboard.extension-navigation.js"></script>
<style>
/* Add this css so we can see when the action (orange) keys are highlighted */
.ui-keyboard-button.ui-state-active.ui-state-hover {
border: 1px solid #fff;
-moz-box-shadow: 1px 1em 1px #ffba2b inset;
-webkit-box-shadow: 1px 1em 1px #ffba2b inset;
box-shadow: 1px 1em 1px #ffba2b inset;
}
/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus { border-color: #59b4d4; }
</style>
<!-- initialize keyboard (required) -->
<script>
$(function(){
$('#keyboard')
.keyboard()
.addNavigation({
position : [0,0], // set start position [row-number, key-index]
toggleMode : false, // true = navigate the virtual keyboard, false = navigate in input/textarea
toggleKey : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
focusClass : 'hasFocus' // css class added when toggle mode is on
});
});
</script>
</head>
<body>
<!-- Links to other demo pages & docs -->
<div id="nav">
<a href="index.html">Main Demo</a>
<a href="basic.html">Basic</a>
<a href="mobile.html">Mobile</a>
<a href="layouts.html">Layouts</a>
<a class="current" href="navigate.html">Navigate</a>
<a href="calculator.html">Calculator</a>
<a class="play" href="http://jsfiddle.net/Mottie/CAQfp/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<h1><a href="https://github.com/Mottie/Keyboard">Virtual Keyboard Navigate Demo</a></h1>
<h4>Note: Navigation inside of the input/textarea is <strong>disabled</strong>. This includes the <span class="underline">autocomplete</span> extension navigation.</h4>
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<textarea id="keyboard"></textarea>
</div> <!-- End wrapper -->
<div id="info">
<ul>
<li>F1 - Toggle navigation (textarea and keyboard).</li>
<li>Left - Move one key left.</li>
<li>Right - Move one key right.</li>
<li>Up - Move up one row.</li>
<li>Down - Move down one row.</li>
<li>Home - Move to the first key in the row.</li>
<li>End - Move to the last key in the row.</li>
<li>Page Up - Move to the first row.</li>
<li>Page Down - Move to the last row.</li>
<li>Enter - Add the highlighted key.</li>
</ul>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.