Question

我正试图在点击div时调出移动设备的数字键盘。

我不确定这是否可行。

我知道我可以使用输入type="tel"或type="number"，但在我的情况下，我没有使用任何输入。我只需要在用户点击div元素时显示数字小键盘。

有人可以就此提出建议吗？

提前致谢。

Answer 1

一种解决方案是将<input type="number">置于隐藏显示的<div>内，并将其位置设置为绝对值，以便覆盖所有div，然后点击它将打开键盘。

Answer 2

试试这个：

来源：http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

＆＃13;

jQuery(document).ready(function() {

  // Device detection from https://stackoverflow.com/a/21742107/4744531
  function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
      return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
      return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      return "iOS";
    }

    return "unknown";
  }

  $(document).on("click", ".keypad", function(e) {
    e.preventDefault();
    if (getMobileOperatingSystem() === "Android") {
      $('.numpad-android').focus();
    } else {
      $('.numpad-ios').focus();
    }
  });

});

＆＃13;

.phantom-input {
  display: none;
  width: 0;
  height: 0;
}

.keypad {
  background-color:yellow;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="keypad"></div>
<input type="text" pattern="[0-9]*" class="numpad-android phantom-input">
<input type="number" step="0.01" class="numpad-ios phantom-input">

＆＃13;

是否可以在DIV点击时调出设备的数字键盘？

2 个答案: