【问题标题】:Force numpad on iPad when focusing on textbox in our website专注于我们网站上的文本框时,在 iPad 上强制使用数字键盘
【发布时间】:2012-07-09 05:10:20
【问题描述】:

您好,我们有一个 HTML5 网站,可通过 iPad 访问(类似于 kiosk 应用程序)。网站提示用户输入他们的 PIN 码。我想要的是当用户关注 PIN 文本框时强制 iPad 显示数字键盘。它会被非常老的人使用,默认情况下要切换到 iPad 键盘中的小键盘,您必须单击“123”按钮。老年人不会知道的。

我可以使用类似的东西

<input type="number" />

【问题讨论】:

    标签: css ios ipad html


    【解决方案1】:

    您可以在number 中设置文本字段的类型,它将显示标准的 1-9 拨号盘式键盘。

    例子:

    <input type="number" />
    

    来源: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/InputTypes.html

    【讨论】:

      【解决方案2】:

      您可以使用 HTML5 的新文本框类型(数字)。当浏览器不需要它时,它默认为常规文本框。要使用它将输入类型设置为数字。例如:

      <input type="number" />
      

      另一种解决方案是使用 Javascript。您可以使用 jQuery UI 的数字选择器、jStepper 等插件,或者只需添加以下代码来限制普通文本框。

      $(document).ready(function() {
          $(".text_field").keydown(function(event) {
              if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
               // Allow: Ctrl+A
              (event.keyCode == 65 && event.ctrlKey === true) || 
               // Allow: home, end, left, right
              (event.keyCode >= 35 && event.keyCode <= 39)) {
                   // let it happen, don't do anything
                   return;
          }
          else {
              // Ensure that it is a number and stop the keypress
              if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                  event.preventDefault(); 
              }   
          }
      });
      

      });

      来源:How to allow only numeric (0-9) in HTML inputbox using jQuery?

      【讨论】:

      • 如果我使用 jquery,它会在 iPad 上强制使用数字键盘吗?
      • jQuery 不会影响数字键盘。他建议的是数字选择器的替代 UI,或限制允许的输入(当输入任何 != 数字时不做任何事情。)
      猜你喜欢
      • 2012-10-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-02-09
      • 1970-01-01
      相关资源
      最近更新 更多