キャンセルの方法
スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。|
1 |
<input type="text" name="hoge" value="" readonly="readonly"> |
利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。
予約システムなどであれば、電話番号の入力や電卓機能を独自のテンキーを実装できると入力しやすいですね。
ただreadonly属性を付与しただけだと単純にソフトウェアキーボードが立ち上がらないだけなので、jsでテンキーなどを実装する必要があります。
デモ
タッチデバイスでinputをタップすると、テンキーが立ち上がります。（ブラウザの方は開発者モードで確認できます）簡単にテンキーを作成しました。
inputをタップするとテンキーが立ち上がり、数字を入力して、OKボタンを押すとinputに結果を挿入しています。
サンプルソース
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<input type="text" name="price" class="keypad" value="" placeholder="ここをタップ" readonly="readonly"> <div id="customKeypad"> <output id="ckp_result"></output> <ul id="ckp_btnAll"> <li data-key="7">7</li> <li data-key="8">8</li> <li data-key="9">9</li> <li data-key="4">4</li> <li data-key="5">5</li> <li data-key="6">6</li> <li data-key="1">1</li> <li data-key="2">2</li> <li data-key="3">3</li> <li data-key="0" id="ckp_key0">0</li> <li data-key="ent" id="ckp_enter">OK</li> </ul> </div> |
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
$(function() { //反応させたいinput要素のclass名を定義--------------------------------- var keyClass = '.keypad'; //端末判定--------------------------------- var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){ var tabFlag = true; //iPhone、iPad、Androidの場合trueに }else{ var tabFlag = false; //それ以外の場合falseに } var valText = ""; //端末判定の結果に合わせて動作 if(tabFlag == true){ //タブレット端末-------------------------------- $(keyClass).on("click", function() { if(!$('#customKeypad').is(':visible')){ $('#customKeypad').show(); var val = $(this).val(); $('#ckp_result').text(val); } }); $('#ckp_btnAll li').on("click", function() { var valText = $('#ckp_result').text(); var key = $(this).attr('data-key'); console.log(key); if(key == 'ent'){ //Enter $(keyClass).attr('value',valText); $('#ckp_result').text(); $('#customKeypad').hide(); }else{ //数字キー if(valText == '0'){ $('#ckp_result').text(key); }else{ $('#ckp_result').text(valText + key); } } }); } }); |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
#customKeypad{ display: none; width: 40vw; border: #DDD solid 2px; background: #FFF; border-radius: 5px; padding: 3vw; box-shadow: 3px 3px 8px rgba(0,0,0,0.25); box-sizing: border-box; position: fixed; top: 3vw; left: 3vw; } #ckp_result{ display: block; width: 100%; min-height: 1em; line-height: 100%; border-radius: 8px; padding: 1.5vw 3vw; text-align: right; margin-bottom: 3vw; font-size: 3.6vw; border: #DDD solid 1px; background: #DFDFDF; color: #333; box-sizing: border-box; position: relative; cursor: pointer; } #ckp_btnAll{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch; padding: 0; margin: 0; } #ckp_btnAll li{ list-style: none; font-size:3vw; width:calc((100% - 2vw) / 3); text-align: center; padding: 1vw 0; color: #FFF; background: #666; font-weight: bold; border-radius: 8px; margin-right: 1vw; margin-bottom: 1vw; box-sizing: border-box; cursor: pointer; } #ckp_btnAll li:nth-child(3n){ margin-right: 0; } #ckp_btnAll li#ckp_key0{ width: calc(((100% - 1vw) / 3) * 2); } #ckp_btnAll li#ckp_enter{ background: #ea7433; margin-right: 0; } |
