私は、divをクリックして携帯端末の数字キーパッドを表示しようとしています。デバイスの数字キーパッドをDIVクリックに表示することはできますか？
これはまったく可能かどうかわかりません。
入力type="tel"またはtype="number"を使用できますが、私の場合は入力を使用していません。ユーザーがdiv要素をクリックしたときに数字キーパッドを表示するだけです。
誰かアドバイスをお願いしますか？
ありがとうございます。
<div>の中に<input type="number">を置いて表示を非表示にし、その位置を絶対に設定してすべてのdivをカバーできるようにすることです。次にクリックするとキーボードが開きます。
実際に良いアイデア。私はこれを行くかもしれない。 –
良い！あなたがそれを完了させるとき私に知らせる:) – Sletheren
これを試してみてください：
出典：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">
を私はそれがあるとは思いません。 –
@ RoryMcCrossan、私はあなたが入力を使用していない場合は、方法をlol –
したいと思いますどのようにユーザーは何かを入力するつもりですか？スクリプトを使ってdivに直接入れることを望んでいましたか？しかし、ええ、デバイスのキーボードは、ユーザーがユーザーの入力を受け入れる何かをクリックしたと思ったときにのみ起動されます。これはブラウザの内蔵機能の一種で、タッチスクリーンデバイス上でのO/Sの相互作用です（<->）。 – ADyson