How to include virtual keyboard(numeric pad) in website? - php

Question

There is a form filling in my website, and i included virtual keyboard there, when user click in textarea, then virtual keyboard will appear, and in some forms user needs to fill numbers, so i want to include numeric pad in forms where should fill the numbers. I found one, but i cant include it.
I included scripts and css in my tpl file, first 3 of numpad, the rest of keyboard:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.keypad.js"></script>
<link type="text/css" href="jquery.keypad.css" rel="stylesheet">
<script type="text/javascript" src="keyboard.user.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<main class="main" style="padding:0; overflow-x:initial">
<div class="container">
{include file="engine/modules/products/eogpo.php"}
</div>
</main>
<div id="isTerminal"></div>
$(function () {
$('#defaultKeypad').keypad();
});
<div id="modalError" class="modal info__modal" data-modal>
<button data-izimodal-close="" class="modal__close">
<svg class="icon icon-close"><use xlink:href="/images/sprite.svg#icon-close"></use></svg>
</button>
<div class="modalStyle">
<h3 class="info__title" id="errorTitle"><?php echo _("Ошибка"); ?></h3>
<div id="textError"></div>
</div>
</div>
<div id="modalInfo" class="modal info__modal" data-modal>
<button data-izimodal-close="" class="modal__close">
<svg class="icon icon-close"><use xlink:href="/images/sprite.svg#icon-close"></use></svg>
</button>
<div class="modalStyle">
<div id="textInfo"></div>
</div>
</div>
<div id="overLoader" style="display: none"><img src="/templates/assets/images/loading.gif" alt="Loading..." /></div>
In tutorial written that I should write:
$(function () {
$('#defaultKeypad').keypad();
});
to call the plugin with default options, so i wrote it in tpl file
so finally i include the numpad id in:
<fieldset class="field-set col col--4-12" style="false">
<label for="orderIIN" class="field-set__label checkList">
<?php echo _("IIN");?>
</label>
<input class=" field iin-masked datas" id="IIN0 defaultKeypad" type="text" name="IIN[]" maxlength="12" />
<span class="small col" id="textKBM0"></span>
<span class="small col" id="loadingIIN0"></span>
<input class="datas" id="KBM0" type="hidden" name="KBM[]" value="" />
<input class="datas" id="clientID0" type="hidden" name="clientID[]" value="" />
<input class="datas" id="clientISN0" type="hidden" name="clientISN[]" value="" />
<input class="datas" id="clientNation0" type="hidden" name="clientNation[]" value="Kazakhstan" />
</fieldset>
Keyboard js works fine, but numpad js still doesn't turn on, where am i doing wrong?

Answer 1

You are probably missing jquery-ui assets
STEP 1 - INCLUDE JQUERY
Append the below script tag on top of your page and delete the previous jquery script tags.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
open the page with chrome, open the developer tools by pressing f12 and make sure that you have the following files under Sources tab:
jquery.min.js
jquery-ui.min.js
jquery-ui.css
STEP 2 - INCLUDE JQUERY KEYPAD CSS AND JS
Download jquery.keypad.css, jquery.plugin.js and jquery.keypad.js from here
Unzip the file jquery.keypad.package-2.2.1 and move them to the respective js and css folder of your project.
Add on top of your page, after the jquery script tag the following script.
<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
As explained above, refresh and verify that the assets are included in your application
STEP 3 - INCLUDE JQUERY KEYPAD CSS AND JS
Open your chrome developer console to run the following commands:
$(selector).keypad();
where selector is replaced from the #id or .class of your div. In your case should be:
$('#defaultKeypad').keypad();
I selected a div from the page as in the below picture
[
then I run .keypad() and the .keypad() show in the page
you can find all the instruction and you can also test the functionality on this page

Answer 2

I don't know about the JQ version but I just made this one up.
Each textbox will have it own id and onclick event:
showKeyPad(x, y, this.id):
x = margin-left
y = margin-top
You can set x and y to null to ignore.
Even if it is not what you would like, I enjoyed making it and anyone is welcome to improve it in anyway. Totally free without ads :)
Copy Paste the following to give it a trial.
<html>
<head>
<style>
#keypad{
position: absolute;
background-color: lightblue;
margin-left: 20vw;
margin-top: 20vh;
width: 14vw;
height: 30vh;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 2%;
}
.keypads{
display: inline;
width: 28%;
height: 19%;
margin-top: 5%;
margin-left: 3%;
border-color: grey;
border-width: 1px;
border-style: solid;
border-radius: 2%;
}
</style>
<script type="text/javascript">
var focused;
function showKeypad(x, y, tBox){
var keypad = document.getElementById("keypad");
if(x != null && y != null){
keypad.style.marginLeft = x + "vw"; //Setting x and y are optional but it can be
keypad.style.marginTop = y + "vh"; // set to render near textboxes // Set x & y to 0 to ignore
}
keypad.style.display = "block";
window.focused = document.getElementById(tBox);
}
function hideKeyPad(){
var keypad = document.getElementById("keypad");
keypad.style.display = "none";
}
function SendInputs(input){
if(focused){
if(input != "CE"){
var oldText = focused.value;
oldText += input;
focused.value = oldText;
}else
{
focused.value = "";
}
}else hideKeyPad();
}
</script>
</head>
<body>
<div id="keypad" style="display: none;">
<input type="button" class="keypads" value="1" onclick="SendInputs('1')">
<input type="button" class="keypads" value="2" onclick="SendInputs('2')">
<input type="button" class="keypads" value="3" onclick="SendInputs('3')"><br>
<input type="button" class="keypads" value="4" onclick="SendInputs('4')">
<input type="button" class="keypads" value="5" onclick="SendInputs('5')">
<input type="button" class="keypads" value="6" onclick="SendInputs('6')"><br>
<input type="button" class="keypads" value="7" onclick="SendInputs('7')">
<input type="button" class="keypads" value="8" onclick="SendInputs('8')">
<input type="button" class="keypads" value="9" onclick="SendInputs('9')"><br>
<input type="button" class="keypads" value="CE" style="color:red;" onclick="SendInputs('CE')">
<input type="button" class="keypads" value="0" onclick="SendInputs('0')">
<input type="button" class="keypads" value="X" style="color:red;" onclick="hideKeyPad()">
</div>
<div>
<input id="Phone" type="text" onclick="showKeypad(5, 10, this.id)">
<input type="text" >
<input type="text" >
<input type="text" >
<input id="ID" type="text" onclick="showKeypad(50, 10, this.id)">
<input type="text" >
<input type="text" >
<input id="DOB" type="text" onclick="showKeypad(80, 10, this.id)">
</div>
</body>
</html>