Key input on mouse hover #589
Comments
<!DOCTYPE html>
<html>
<head>
<style>
button.ui-keyboard-button {
margin: 4px;
height: 4em;
width : 4em;
}
.ui-keyboard button.ui-keyboard-space {
width: 30em;
}
.ui-keyboard button.ui-keyboard-accept {
width: 6em;
}
.ui-keyboard button.ui-keyboard-cancel {
width: 6em;
}
.ui-keyboard button.ui-keyboard-enter {
width: 10em;
}
.ui-keyboard button.ui-keyboard-tab {
width: 6em;
}
.ui-keyboard button.ui-keyboard-bksp {
width: 6em;
}
.ui-keyboard button.ui-keyboard-shift {
width: 6em;
}
</style>
<meta charset="utf-8">
<title>Virtual Keyboard</title>
<!-- jQuery (required) & jQuery UI + theme (optional) -->
<link href="docs/css/jquery-ui.min.css" rel="stylesheet">
<!-- still using jQuery v2.2.4 because Bootstrap doesn't support v3+ -->
<script src="docs/js/jquery-latest.min.js"></script>
<script src="docs/js/jquery-ui.min.js"></script>
<!-- <script src="docs/js/jquery-migrate-3.0.0.min.js"></script> -->
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<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-caret.js"></script> -->
<!-- demo only -->
<link rel="stylesheet" href="docs/css/bootstrap.min.css">
<link rel="stylesheet" href="docs/css/font-awesome.min.css">
<link href="docs/css/demo.css" rel="stylesheet">
<link href="docs/css/tipsy.css" rel="stylesheet">
<link href="docs/css/prettify.css" rel="stylesheet">
<script src="docs/js/bootstrap.min.js"></script>
<script src="docs/js/demo.js"></script>
<script src="docs/js/jquery.tipsy.min.js"></script>
<script src="docs/js/prettify.js"></script> <!-- syntax highlighting -->
</head>
<body>
<div id="page-wrap">
<h1>
Virtual Keyboard<br>
</h1>
<div class="block" id="autocomplete">
<h2>
<span class="tooltip-tipsy" title="Click, then scroll down to see this code">QWERTY Text</span>
</h2>
<input id="text" type="text" placeholder=" Enter something...">
<br>
</div>
<div id="showcode"></div>
<div id="footer"></div>
</div>
</body></html> |
|
Hi @ArijHussain! Try the following code (demo): $(function() {
// milliseconds before a hovered key is first typed
var regularKeyHoverTimer = 200;
// milliseconds (ms) unitl the hover key starts repeating
var regularKeyHoverRepeat = 1000;
// approximate repeat rate in characters per second
var regularKeyRepeatRate = 3;
// milliseconds before an action (shift, accept & cancel) is performed
// we don't want to repeat action keys!
var actionKeyHoverTimer = 1000;
var internalTimer, lastKey;
function startTimer($key, isAction) {
clearTimeout(internalTimer);
// if it's an action key, wait longer AND do not repeat
internalTimer = setTimeout(function() {
// use 'mousedown' to trigger typing
$key.trigger("mousedown");
}, isAction ? actionKeyHoverTimer : regularKeyHoverTimer);
}
$("#keyboard").keyboard({
// open the keyboard popup on input mouseenter
openOn: "mouseenter",
repeatDelay: regularKeyHoverRepeat,
repeatRate: regularKeyRepeatRate,
visible: function(event, keyboard) {
keyboard.$keyboard
.find("button")
.on("mouseenter", function(event) {
var $key = $(this),
action = $key.attr("data-action"),
isAction = action in $.keyboard.keyaction;
// don't repeat action keys
if (isAction && keyboard.last.key === action) return;
startTimer($key, isAction);
})
.on("mouseleave", function() {
clearTimeout(internalTimer);
});
},
hidden: function() {
clearTimeout(internalTimer);
}
});
});Hopefully all the variables I added at the top are self-explanatory. Adjust the times to meet your needs. The only issue I've encountered so far is that hovering over the "Shift" key, then deciding to hover over it a second time doesn't work. This is because the code prevents the same last action key from being performed twice in a row. Get around it by hovering a different action key, like "Tab", then hover the "Shift" key again. I know that isn't ideal. |
|
Thanks. You are a savior. Works perfectly. :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I am looking for a solution where the mouse hovers on a key will input the key in the textbox and the user does not have to click it. The solution is necessary for eye tracking. Is it possible in any way?
I am attaching my code here below. I have made the buttons a bit larger so the user can fixate on the buttons properly and the eye tracking can be smoother.
Thanks,
Arij
The text was updated successfully, but these errors were encountered: