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.

if you're not using any inputs, how is the user going to input anything? Were you hoping to just put it straight in the div using script? But yeah, the device's keyboards will only be brought up when it thinks the user has clicked on something which will accept user input. That's kind of built-in functionality of the browserO/S interaction on a touchscreen device. — ADyson, Aug 29 '17 at 10:26
@ADyson, without getting into too much details, yes, i was aiming to show the users inputs directly in the div. — David Hope, Aug 29 '17 at 10:28

score 2 · Answer 1 · answered Aug 29 '17 at 10:29

2

One solution is to put the <input type="number"> inside the <div> with display hidden, and set its position to absolute so it can cover all the div, then when clicking it will open the keyboard.

answered Aug 29 '17 at 10:29

Sletheren

2,125
6
23

Good idea actually. i might give this a go. – David Hope Aug 29 '17 at 10:31

score 2 · Answer 2 · answered Aug 29 '17 at 10:37

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

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

2 Answers2