32

HTML / CSS/JSをベースにしたiPhone用のWebアプリを作成しています。フォームを使用して入力を受け取り、データをスクリプトに渡しますが、発生している問題は、キーボードが消えないことです。ユーザーは情報を入力し、送信を押します。JavaScriptであるため、ページは再読み込みされません。キーボードは所定の位置に留まりますが、これは厄介であり、ユーザーにとって別のステップを追加します（キーボードを閉じる必要があります）。

Safariのキーボードを強制的に削除する方法はありますか？基本的に、この質問は、入力ボックスのフォーカスを失ったり、ぼかしたりするように強制する方法を尋ねるのと同じだと感じています。オンラインで見ると、blurイベントを検出するための例はたくさんありますが、このイベントを強制的に発生させる例はありません。

4

9 に答える 9

44

さらに簡単に、現在フォーカスされている要素でblur（）を呼び出すことができます。$（ "＃inputWithFocus"）。blur（）

于 2012-02-01T21:37:55.820 に答える
43 
document.activeElement.blur();
于 2012-09-06T05:45:22.000 に答える
28

focus()送信ボタンなど、テキスト以外の要素を試してみることができます。

于 2010-05-23T00:09:41.483 に答える
19

これは、フォーカスが入力フィールドまたはテキストエリアフィールドにあり、ユーザーがその要素の外側をタップするたびにキーボードを非表示にする小さなコードスニペットです（デスクトップブラウザーの通常の動作）。

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

document.addEventListener('touchstart', function(e) {
    if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
        document.activeElement.blur();
    }
}, false);
于 2012-03-30T12:13:20.423 に答える
3

戻るボタンが押されたことを検出するには、次のコマンドを使用します。

$('input').bind('keypress', function(e) { if(e.which === 13) { document.activeElement.blur(); } });

于 2015-01-22T10:47:11.957 に答える
3

私はこの問題に遭遇し、満足のいく解決策が得られるまでしばらく時間を費やしました。入力要素領域の外側をタップしたときに入力イベントを閉じたかったので、私の問題は元の質問とは少し異なりました。

上記の目的の回答は機能しますが、完全ではないと思います。このページにアクセスして、私と同じものを探している場合の私の試みを次に示します。

jQueryソリューション

touchstartドキュメント全体にイベントリスナーを追加します。画面がタッチされると（タップ、ホールド、スクロールのいずれであるかは関係ありません）、ハンドラーがトリガーされ、次のことを確認します。

  1. タッチした領域は入力を表していますか？
  2. 入力に焦点が当てられていますか？

これらの2つの条件が与えられた場合、次にblur()イベントを発生させて入力からフォーカスを削除します。

ps：私は少し怠惰だったので、上記の応答から行をコピーしましたが、コードの一貫性を維持したい場合は、ドキュメントにjQueryセレクターを使用できます

$(document).on('touchstart', function (e) {
  if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
    document.activeElement.blur();
  }
});

Hammer.JSソリューション

または、 Hammer.JSを使用してタッチジェスチャを処理することもできます。イベントでそれを却下したいtapが、ユーザーがページをスクロールしているだけの場合はキーボードがそこにあるはずだとしましょう（または、テキスト選択を押したままにして、それをコピーして入力領域に貼り付けることができます）

そのような状況では、解決策は次のようになります。

var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
  if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
    document.activeElement.blur();
  }
});

それが役に立てば幸い！

于 2015-11-20T01:15:28.093 に答える
2 
$('input:focus').blur();

フォーカスされた要素にCSS属性を使用すると、現在フォーカスがある入力がぼやけ、キーボードが削除されます。

于 2012-08-15T16:20:19.280 に答える
1

必ずCSSで設定してください：

body {
  cursor: pointer;
}

そうしないと、イベントハンドラーの呼び出しdocument.activeElement.blur()が発生しません。詳細については、http：//www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safariを参照してください。

于 2015-08-25T06:42:11.403 に答える
0

AngularJsでハスキーのコードを使用している人のために、ここに書き直しがあります：

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

angular.element($document[0]).on('touchstart', function(e) {
  var activeElement = angular.element($document[0].activeElement)[0];
  if(!isTextInput(e.target) && isTextInput(activeElement)) {
    activeElement.blur();
  }
});
于 2017-02-02T17:33:23.113 に答える