web-dev-qa-db-ja.com

iPhone Safari Webアプリでキーボードを非表示にする

HTML/CSS/JSに基づいて、iPhone用のWebアプリケーションを作成しています。入力を受け取ってスクリプトにデータを渡すためにフォームを使用していますが、遭遇する問題はキーボードが消えないことです。ユーザーは情報を入力して送信を押します。JavaScriptであるため、ページはリロードされません。キーボードは所定の位置に残りますが、これは煩わしいことであり、ユーザーが（キーボードを閉じなければならない）別のステップを追加します。

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

iphonekeyboardweb-applicationsblur
31
munchybunch

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

41
Steven
document.activeElement.blur();
39
iPadDeveloper2011

送信ボタンのような非テキスト要素に対してfocus() ingを試すことができます。

27
ceejayoz

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

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);
17
Husky

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

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

3
Ben Southall

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

上記の意図的な回答は機能しますが、完全ではないので、ここに私が同じページを見つけた場合の私の試みを示します。

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();
  }
});

それが役に立てば幸い！

2
rafg
$('input:focus').blur();

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

2
Design by Adrian

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

1
davidgoli

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();
  }
});
0
Tyler Moses