クーポン会社のフロントエンドサイトを開発しており、ユーザーが電話番号と$$を入力するだけでよいページがあります。 Javascriptで構築された、使いやすく高速な楽しいオンスクリーンキーボードを思いつきました。しかし、ユーザーがこれらのフィールドにテキスト/数字をフォーカスして入力したときに、ソフトキーボードが飛び出すのを防ぐ解決策を探しています。
HTML5が思いついた「number/phone/email」タイプの属性について知っています。しかし、狂ったように聞こえるリスクがあるため、スクリーンキーボードを使用したいだけです。
注:このWebサイトは主にタブレットを対象としています。
ありがとう。
ソフトキーボードはOSの一部であるため、多くの場合、非表示にすることはできません。また、iOSでは、キーボードを非表示にすると要素からフォーカスが外れます。
ただし、入力でonFocus
属性を使用し、すぐにblur()
テキスト入力を使用すると、キーボードは自動的に非表示になり、onFocus
イベントは変数をどのテキスト入力が最後にフォーカスされたかを定義します。
次に、キー入力をシミュレートするのではなく、ページ上のキーボードを変更して、最後にフォーカスした(変数を使用して確認する)テキスト入力のみを変更します。
スコットSの答えは完璧に機能しました。
モバイル用のWebベースの電話ダイヤルパッドをコーディングしていたので、ユーザーがキーパッド(テーブル内のtd span要素で構成される)で数字を押すたびに、ソフトキーボードがポップアップしました。また、ユーザーがダイヤルする番号の入力ボックスをタップできないようにしたかったのです。これにより、両方の問題が1ショットで実際に解決されました。以下が使用されました。
<input type="text" id="phone-number" onfocus="blur();" />
これらの回答は悪くありませんが、実際にはデータの入力を許可しないという点で制限があります。バーコードリーダーを使用してフィールドにデータを入力する場合も同様の問題がありましたが、キーボードを非表示にする必要がありました。
これは私がまとめたもので、かなりうまく機能します:
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のトリガーを使用して、キーボードイベントを別の入力ボックスに直接送信できますが、それを気にする必要はなかったので、私はしませんでした。
たとえば、最大長を入力した後、フィールドからぼやけます(キーボードが消えます)、複数のフィールドがある場合は、「//」を追加する行を追加するだけです
var MaxLength = 8;
$(document).ready(function () {
$('#MyTB').keyup(function () {
if ($(this).val().length >= MaxLength) {
$('#MyTB').blur();
// $('#MyTB2').focus();
}
}); });
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ボタンを使用してボタンクリックを処理し、ページをリロードして、キーボードを非表示にしてバーコード入力にフォーカスを戻します。