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

【问题标题】：How to include virtual keyboard(numeric pad) in website?如何在网站中包含虚拟键盘（数字键盘）？
【发布时间】：2019-04-26 04:12:37
【问题描述】：

我的网站有一个表格填写，我在其中包含了虚拟键盘，当用户点击 textarea 时，会出现虚拟键盘，并且在某些表格中用户需要填写数字，所以我想在表格中包含数字键盘应该在哪里填写数字。我找到了一个，但我不能包含它。

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

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

所以最后我将小键盘 id 包含在：

<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还是打不开，我哪里做错了？

【问题讨论】：

它需要 jQuery 库 1.7 或更高版本。检查你是否有旧版本的 jQuery
控制台有错误吗？
你能不能把id="IIN0 defaultKeypad"改成id="defaultKeypad"
@RecepKaradas 尝试了这两个选项，但没有改变
@atoms 没有错误，只是没有显示任何小键盘

标签： php jquery html templates

【解决方案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 KEYPAD 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 KEYPAD CSS 和 JS

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

$(selector).keypad();

选择器被替换为 div 的 #id 或 .class。你的情况应该是：

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

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

[

然后我运行.keypad() 并在页面中显示.keypad()

你可以找到所有的指令，你也可以测试功能on this page

【讨论】：

还是不行，可能这个JS和别的文件冲突了
@ArsenOspanov 然后您一次注释每个 js 文件，直到它开始工作，这样您就可以了解哪个 js 文件破坏了它，但我不相信您有冲突。问题是您包含jquery-min.js，而您应该遵循允许您拥有jquery + jquery-ui 资产的说明。如果您不想按照教程进行操作，至少请确保您正确安装 jquery-ui，如 jqueryui.com 上的那样。
@ArsenOspanov 一旦你确定包含了这些资产，也删除你所有的样式表（除了这个功能中需要的那些）并尝试在你的控制台中运行$('#defaultKeypad').keypad();
填表和jquery.js冲突，我是在jqueryui.com上下载的，当我加进去的时候，填表不见了
我找到了，我的表单填写有另一个js文件，我删除了它们进行测试，一切正常，现在我需要处理js文件，并解决冲突）非常感谢，你帮了我很多

【解决方案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>

【讨论】：