web-dev-qa-db-ja.com

HTML Mobile-ソフトキーボードを強制的に非表示にする

クーポン会社のフロントエンドサイトを開発しており、ユーザーが電話番号と$$を入力するだけでよいページがあります。 Javascriptで構築された、使いやすく高速な楽しいオンスクリーンキーボードを思いつきました。しかし、ユーザーがこれらのフィールドにテキスト/数字をフォーカスして入力したときに、ソフトキーボードが飛び出すのを防ぐ解決策を探しています。

HTML5が思いついた「number/phone/email」タイプの属性について知っています。しかし、狂ったように聞こえるリスクがあるため、スクリーンキーボードを使用したいだけです。

注：このWebサイトは主にタブレットを対象としています。

ありがとう。

javascripthtml5ipadtablet
43
crodica

ソフトキーボードはOSの一部であるため、多くの場合、非表示にすることはできません。また、iOSでは、キーボードを非表示にすると要素からフォーカスが外れます。

ただし、入力でonFocus属性を使用し、すぐにblur()テキスト入力を使用すると、キーボードは自動的に非表示になり、onFocusイベントは変数をどのテキスト入力が最後にフォーカスされたかを定義します。

次に、キー入力をシミュレートするのではなく、ページ上のキーボードを変更して、最後にフォーカスした（変数を使用して確認する）テキスト入力のみを変更します。

40
Scott Stevens

スコットSの答えは完璧に機能しました。

モバイル用のWebベースの電話ダイヤルパッドをコーディングしていたので、ユーザーがキーパッド（テーブル内のtd span要素で構成される）で数字を押すたびに、ソフトキーボードがポップアップしました。また、ユーザーがダイヤルする番号の入力ボックスをタップできないようにしたかったのです。これにより、両方の問題が1ショットで実際に解決されました。以下が使用されました。

<input type="text" id="phone-number" onfocus="blur();" />
47
thamind

その他の読者/検索者向け：

Rene Pot は このトピック を指摘しているので、

入力フィールドをreadonly="true"に設定することで、だれも入力しないようにする必要がありますが、それでもクリックイベントを起動できます。

この方法を使用すると、「ソフト」キーボードのポップアップを回避し、クリックイベントを起動したり、画面上のキーボードで入力を埋めることができます。

このソリューションは、一般にすでにコントロールを実装している日時ピッカーでも正常に機能します。

22
dagopert

これらの回答は悪くありませんが、実際にはデータの入力を許可しないという点で制限があります。バーコードリーダーを使用してフィールドにデータを入力する場合も同様の問題がありましたが、キーボードを非表示にする必要がありました。

これは私がまとめたもので、かなりうまく機能します：

https://codepen.io/bobjase/pen/QrQQvd/

<!-- must be a select box with no children to suppress the keyboard -->
input: <select id="hiddenField" /> 
<span id="fakecursor" />

<input type="text" readonly="readonly" id="visibleField" />
<div id="cursorMeasuringDiv" />

#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

// whenever the visible field gets focused
$("#visibleField").bind("focus", function(e) {
  // silently shift the focus to the hidden select box
  $("#hiddenField").focus();
  $("#cursorMeasuringDiv").css("font", $("#visibleField").css("font"));
});

// whenever the user types on his keyboard in the select box
// which is natively supported for jumping to an <option>
$("#hiddenField").bind("keypress",function(e) {
  // get the current value of the readonly field
  var currentValue = $("#visibleField").val();

  // and append the key the user pressed into that field
  $("#visibleField").val(currentValue + e.key);
  $("#cursorMeasuringDiv").text(currentValue + e.key);

  // measure the width of the cursor offset
  var offset = 3;
  var textWidth = $("#cursorMeasuringDiv").width();
  $("#hiddenField").css("marginLeft",Math.min(offset+textWidth,$("#visibleField").width()));

});

<input>ボックスをクリックすると、そのボックス内のカーソルをシミュレートしますが、実際には空の<select>ボックスにフォーカスが置かれます。選択ボックスでは、キープレスがリスト内の要素へのジャンプをサポートできるので、キープレスを元の入力に再ルーティングし、シミュレートされたカーソルをオフセットするだけでした。

これはバックスペース、削除などでは機能しませんが、それらは必要ありませんでした。おそらくjQueryのトリガーを使用して、キーボードイベントを別の入力ボックスに直接送信できますが、それを気にする必要はなかったので、私はしませんでした。

3
Bob Jase

たとえば、最大長を入力した後、フィールドからぼやけます（キーボードが消えます）、複数のフィールドがある場合は、「//」を追加する行を追加するだけです

var MaxLength = 8;
    $(document).ready(function () {
        $('#MyTB').keyup(function () {
            if ($(this).val().length >= MaxLength) {
               $('#MyTB').blur();
             //  $('#MyTB2').focus();
         }
          }); });
1
Sportac

Honeywell Dolphin 70eのソフトキーボードとAndroid 4.0.3で戦っています。入力は 'scanwedge'を介してビルトインバーコードリーダーから入力されるため、キーボードは必要ありません。キーイベントを生成します。

私が見つけたのは、以前の回答で説明されたトリックでした：

input.blur();
input.focus();

動作しますが、ページの初期化時に一度だけです。ソフトキーボードを表示せずに入力要素にフォーカスを置きます。後で機能しません。バーコードの接尾辞のTAB文字により、入力要素でonblurまたはoninputイベントが発生します。

多くのバーコードを読み取って処理するには、TAB（9）とは異なる接尾辞を使用できます。 8、ブラウザによって解釈されません。の中に input.keydownイベント、使用e.keyCode == 8処理される完全なバーコードを検出します。

このように、キーボードを非表示にして、入力要素にフォーカスを置いてページを初期化し、すべてのバーコードが入力要素に移動し、フォーカスがその要素から離れることはありません。もちろん、ページに他の入力要素（ボタンなど）を含めることはできません。これは、ソフトキーボードを非表示にしてバーコード入力要素に戻ることができないためです。

ボタンをクリックした後にページをリロードすると、キーボードが非表示になる場合があります。バーコードの高速処理にはajaxを使用し、PostBackで通常のasp.netボタンを使用してボタンクリックを処理し、ページをリロードして、キーボードを非表示にしてバーコード入力にフォーカスを戻します。

0
Roland