58

クーポン会社のフロントエンドサイトを開発していて、ユーザーが電話番号と$$を入力するだけのページがあります。私たちは、Javascriptに組み込まれた、使いやすく高速な楽しいオンスクリーンキーボードを思いつきました。ただし、ユーザーがフォーカスしてこれらのフィールドにテキスト/数字を入力したときにソフトキーボードがポップしないようにするための解決策を探しています。

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

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

ありがとう。

4

10 に答える 10

54

Scott Sの答えは完璧に機能しました。

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

<input type="text" id="phone-number" onfocus="blur();" />
于 2014-03-19T20:43:16.780 に答える
49

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

ただし、onFocus入力で属性を使用し、blur()すぐにテキスト入力を使用すると、キーボードはそれ自体を非表示にし、onFocusイベントは変数を設定して、最後にフォーカスされたテキスト入力を定義できます。

次に、キーの押下をシミュレートするのではなく、最後にフォーカスされた（変数を使用してチェックする）テキスト入力のみを変更するようにページ上のキーボードを変更します。

于 2012-06-07T22:20:33.320 に答える
24

さらなる読者/検索者向け:

Rene Potがこのトピックについて指摘しているように、

属性readonly(またはreadonly="readonly") を入力フィールドに追加することにより、だれも入力フィールドに何も入力できないようにする必要がありますが、それでもクリック イベントを開始することができます。

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

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

于 2016-09-08T09:19:00.527 に答える
6

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

これは私がまとめたものです、それはかなりうまくいきます：

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 のトリガーを使用して、キーボード イベントをどこか別の入力ボックスに直接送信することもできますが、それを気にする必要はなかったので、私はそれを行いませんでした。

于 2018-05-09T16:29:07.327 に答える
0

これは、一般的にソフトキーボードを無効にしたいだけの人に役立つかもしれません. javascriptではなく、Null Keyboardと呼ばれる新しいキーボードレイアウトをインストールすることで、ソフトキーボードを無効にすることができました

于 2021-06-09T11:57:53.037 に答える