Question

我的网站上有一个表格，我在其中包括虚拟键盘，当用户单击文本区域时，将出现虚拟键盘，并且在某些表格中用户需要填写数字，因此我想在表格中包括数字键盘应该在哪里填写数字。我找到了一个，但是我不能包含它。

我在tpl文件（小键盘的前3个，键盘的其余部分）中包含了脚本和CSS：

<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文件中

所以最后我在以下位置加入了数字键盘编号：

<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 open the developer tools by pressing f12的页面，并确保在Sources标签下具有以下文件：

jquery.min.js
jquery-ui.min.js
jquery-ui.css

第2步-包含JQUERY键盘CSS和JS

Download jquery.keypad.css, jquery.plugin.js and jquery.keypad.js from here

解压缩文件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

Open your chrome developer console以运行以下命令：

$(selector).keypad();

其中选择器从div的#id或.class替换。您的情况应该是：

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

我从页面中选择了一个div，如下图所示

[ enter image description here

然后我运行.keypad()，然后在页面上显示.keypad()

您可以找到所有说明，还可以测试功能on this page

Answer 2

我不了解JQ版本，但我只是做了一个。

每个文本框都有其自己的ID和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>

如何在网站中包含虚拟键盘（数字键盘）？

2 个答案: