Is it possible to bring up the device's Number keypad on DIV click?

Question

I'm trying to bring up the mobile device's Number keypad on clicking on a div.

I'm not sure if this is possible at all.

I know I can use input type="tel" or type="number" but in my case I'm not using any inputs. I just need to show the number keypad when the user clicks on a div element.

Could someone please advice on this?

Thanks in advance.

Answer 1

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

Answer 2

Try this:

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

 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(); } }); }); 

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

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