How to get character pressed on virtual keyboard using jkeyboard plugin
I am using a library from git for a virtual keyboard . The library has a file called jkeyboard.js that contains (in part) the code below:
type: function (key) {
var input = this.settings.input,
val = input.val(),
input_node = input.get(0),
start = input_node.selectionStart,
end = input_node.selectionEnd;
var max_length = $(input).attr("maxlength");
if (start == end && end == val.length) {
if (!max_length || val.length < max_length) {
input.val(val + key);
}
} else {
var new_string = this.insertToString(start, end, val, key);
input.val(new_string);
start++;
end = start;
input_node.setSelectionRange(start, end);
}
input.trigger('focus');
if (shift && !capslock) {
this.toggleShiftOff();
}
return key; // added myself
},
Full code for jkeyboard.js can be found here
I also have my own file my_file.js with the following:
$(document).ready(function() {
$('#keyboard').jkeyboard({ // basic setup from docs
input: $('#search_field')
});
});
How do I call the code in jkeyboard from my file and get the character that was pressed on the virtual keyboard? The docs are pretty bare and I was unable to find anything online. I am not the greatest at JavaScript. Any help would be appreciated. Thanks
Solution 1:
what do u mean by calling code in jkeyboard? if the code already in function you just can call in your js file using it's function name. or you can modify the code, make it inside function and call it
function_name(response){
... // do with response
}
and make sure your jkeyboard script above your js script
<script src="jkeyboard.js"></script>
<script src="your_js.js"></script>
or the simplest way just try to get value from the input element.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keyboard Example</title>
<link rel="stylesheet" href="../lib/css/jkeyboard.css">
<style>
body{
background: #144766
}
.hidden-keyboard{
visibility: hidden;
}
</style>
</head>
<body>
<input type="text" class="hidden-keyboard" id="input-field">
<div id="keyboard"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../lib/js/jkeyboard.js"></script>
<script>
$('#keyboard').jkeyboard({
layout: "english_capital",
input: $('#input-field'),
customLayouts: {
selectable: ["english_capital"],
english_capital: [
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',],
['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',],
['Z', 'X', 'C', 'V', 'B', 'N', 'M', '\'', '.'],
['space', '-', 'backspace']
],
}
});
$(document).on("click", "#keyboard", function(){
var value_input = $("#input-field").val()
console.log(value_input)
})
</script>
</body>
</html>