Как включить виртуальную клавиатуру (цифровую клавиатуру) в веб-сайт?

Question

На моем веб-сайте заполняется форма, и я включил туда виртуальную клавиатуру, когда пользователь щелкает текстовую область, затем появляется виртуальная клавиатура, и в некоторых формах пользователю необходимо заполнять цифры, поэтому я хочу включить числовую панель в формыгде должны заполнить цифры.Я нашел один, но не могу его включить.

Я включил скрипты и CSS в мой файл TPL, первые 3 из numpad, остальная часть клавиатуры:

<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>

В учебнике написано, что ядолжен написать:

$(function () {
  $('#defaultKeypad').keypad();
});

, чтобы вызвать плагин с параметрами по умолчанию, поэтому я написал его в файл tpl

, так что, наконец, я включил идентификатор numpad в:

<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> 

Клавиатура JS работает нормально, но Numpad JS по-прежнему не включается, где я делаю неправильно?

Answer 1

Возможно, вам не хватает jquery-ui активов

ШАГ 1 - ВКЛЮЧАЙТЕ JQUERY

Добавьте приведенный ниже скрипт-тег вверху вашей страницы и удалите предыдущий jquery script tags.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

откройте страницу с помощью Chrome, откройте инструменты разработчика, нажав f12 и убедитесь, что у вас есть следующие файлы на вкладке Sources:

1. jquery.min.js
2. JQuery-ui.min.js
3. JQuery-ui.css

ШАГ 2 - ВКЛЮЧАЙТЕ JQUERY KEYPAD CSS И JS

Скачать jquery.keypad.css, jquery.plugin.js и jquery.keypad.js отсюда

Распакуйте файл jquery.keypad.package-2.2.1 и переместите его в соответствующую папку js и css вашего проекта.

Добавьте в начало вашей страницы после тега jquery следующий скрипт.

<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>

Как объяснено выше, обновите и убедитесь, что активы включены в ваше приложение

ШАГ 3 - ВКЛЮЧАЙТЕ КЛАВИАТУРУ JQUERY CSS И JS

Откройте консоль разработчика Chrome , чтобы выполнить следующие команды:

$(selector).keypad();

, где селектор заменяется на #id или .class вашего div. В вашем случае должно быть:

$('#defaultKeypad').keypad();

Я выбрал div со страницы, как на картинке ниже

[

затем я запускаю .keypad() и .keypad() показывают на странице

Вы можете найти всю инструкцию и проверить функциональность на этой странице

Answer 2

Я не знаю о версии JQ, но я только что придумал ее.

У каждого текстового поля будет свой идентификатор и событие onclick:

showKeyPad(x, y, this.id):
x = margin-left
y = margin-top

Вы можете установить xи y к null, чтобы игнорировать.

Даже если это не то, что вы хотели бы, мне понравилось делать это, и любой желающий может улучшить его в любом случае.Абсолютно бесплатно без рекламы :) Копировать Вставьте следующее, чтобы попробовать.

<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>