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

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?

it needs jQuery library 1.7 or later. check if you've older version of jQuery — Vishwa, Apr 26 '19 at 04:35
could you please change `id="IIN0 defaultKeypad"` to `id="defaultKeypad"` — Recep Karadas, Apr 26 '19 at 07:40
you have no error messages in the console and nothing on screen has changed. I would check to see if the keypad has been rendered but isnt visible — atoms, Apr 26 '19 at 08:12
I think you have to add http://keith-wood.name/js/jquery.plugin.js too (before jquery.keypad.js). — Recep Karadas, Apr 26 '19 at 08:16
@atoms i checked, it doesn't load at all. Apparently I connect it wrong — , Apr 26 '19 at 08:17

score 1 · Answer 1 · answered May 02 '19 at 08:45

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

[ enter image description here

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

answered May 02 '19 at 08:45

Fabrizio Bertoglio

5,890
4
16
57

still doesn't work, probably this JS conflicts with another file – Arsen Ospanov May 02 '19 at 11:11
@ArsenOspanov then you comment each js file one at the time until it starts working, so you can understand which js file is breaking it, but I don't believe that you have a conflict. The problem is that you are including `jquery-min.js` while you should follow the instructions which allows you to have jquery + jquery-ui assets. If you don't want to follow the tutorial, at least make sure that you correctly install jquery-ui as on https://jqueryui.com/. – Fabrizio Bertoglio May 02 '19 at 12:20
@ArsenOspanov Once you are sure that the assets are included, remove all your stylesheets too (expect those required in this functonalities) and try to run `$('#defaultKeypad').keypad();` in your console – Fabrizio Bertoglio May 02 '19 at 12:22
The filling form conflicts with `jquery.js`, I downloaded it on the jqueryui.com, when i included it, my filling form is gone – Arsen Ospanov May 03 '19 at 03:58
@ArsenOspanov I tested and it does work with `
`. So maybe some of the the other classes are causing the problem. – Fabrizio Bertoglio May 03 '19 at 06:40
1

i found it, my form filling has another js files, and i removed them for the test, and it all worked, now i need to deal with JS files, and resolve conflict) thank you very much, you've helped me a lot – Arsen Ospanov May 03 '19 at 06:46

score 0 · Answer 2 · answered Apr 30 '19 at 08:25

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>

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

2 Answers2

Linked