How To Include Virtual Keyboard(numeric Pad) In Website?
Solution 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.
<scripttype="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.
<linktype="text/css"href="css/jquery.keypad.css" ><scripttype="text/javascript"src="js/jquery.plugin.js"></script><scripttype="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
Solution 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-lefty= 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><scripttype="text/javascript">var focused;
functionshowKeypad(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);
}
functionhideKeyPad(){
var keypad = document.getElementById("keypad");
keypad.style.display = "none";
}
functionSendInputs(input){
if(focused){
if(input != "CE"){
var oldText = focused.value;
oldText += input;
focused.value = oldText;
}else
{
focused.value = "";
}
}elsehideKeyPad();
}
</script></head><body><divid="keypad"style="display: none;"><inputtype="button"class="keypads"value="1"onclick="SendInputs('1')"><inputtype="button"class="keypads"value="2"onclick="SendInputs('2')"><inputtype="button"class="keypads"value="3"onclick="SendInputs('3')"><br><inputtype="button"class="keypads"value="4"onclick="SendInputs('4')"><inputtype="button"class="keypads"value="5"onclick="SendInputs('5')"><inputtype="button"class="keypads"value="6"onclick="SendInputs('6')"><br><inputtype="button"class="keypads"value="7"onclick="SendInputs('7')"><inputtype="button"class="keypads"value="8"onclick="SendInputs('8')"><inputtype="button"class="keypads"value="9"onclick="SendInputs('9')"><br><inputtype="button"class="keypads"value="CE"style="color:red;"onclick="SendInputs('CE')"><inputtype="button"class="keypads"value="0"onclick="SendInputs('0')"><inputtype="button"class="keypads"value="X"style="color:red;"onclick="hideKeyPad()"></div><div><inputid="Phone"type="text"onclick="showKeypad(5, 10, this.id)"><inputtype="text" ><inputtype="text" ><inputtype="text" ><inputid="ID"type="text"onclick="showKeypad(50, 10, this.id)"><inputtype="text" ><inputtype="text" ><inputid="DOB"type="text"onclick="showKeypad(80, 10, this.id)"></div></body></html> In Website?){kind=link}
Post a Comment for "How To Include Virtual Keyboard(numeric Pad) In Website?"