web-dev-qa-db-ja.com

画面をタップしてもiPhoneキーボードが非表示にならない

数値タイプの入力フィールドがあります

<input type="number" pattern="[0-9]*"/>

通常のブラウザーでは、いくつかの数字を入力し、画面をタップすると、iPhone/iPadキーボードが非表示になります。

iframe内の場合、これは機能しません。明示的に完了ボタンをクリックする必要があります。 この問題はiphone/ipadでのみ発生します

これはiframeの問題です。 Javascript/Jqueryを使用した修正は大歓迎です。

更新済み

試しました

 document.activeElement.blur();

javaScriptでイベントがトリガーされたときのfocusout。どれも動作していません。

   $(document).on('focusin', function(){
     $('input').css("background-color", "green");
      console.log('focusin!')
     });

  $(document).on('focusout', function(){
      console.log('focusout!')
     $('input').css("background-color", "yellow");
      $('input').blur();
     });

focusoutがiframe内を呼び出していません！

私の質問は**How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

答えは述べられたように報われます！

javascriptjqueryiosiphoneiframe
24
UI_Dev

キーボードを削除するには、入力にフォーカスを失う必要があります。

document.activeElement.blur();

この行でフォーカスを削除すると、キーボードが消えます。

あなたのケースでは、あなたの体にイベントを追加し、入力をクリックするとこのイベントを停止することが可能です。

$(document).ready(function () {
  $('body').click(function () {
    document.activeElement.blur();
    console.log("blur");
  });

  $('input').click(function (event) {
    event.stopPropagation();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text"/>

更新

私はこれを見つけました answer iframeにアクティブな要素を取得します。

/**
 * Return the active element in the main web or iframes
 * @return HTMLElement
 **/
function getActiveElement() {
  var focused = false;

  // Check if the active element is in the main web or no
  if (document.body === document.activeElement ||
    document.activeElement instanceof HTMLIFrameElement) {

    // Search in iframes
    $('iframe').each(function() {
      var element = this.contentWindow.document.activeElement;
      // If there is a active element
      if (element !== this.contentWindow.document.body) {
        focused = element;
        return false; // Stop searching
      }
    });

  } else focused = document.activeElement;

  return focused; // Return element
}

この関数を使用して、ドキュメントまたはiframeにアクティブな要素を取得できます。

その後、キーボードを非表示にするには、この要素のフォーカスを削除する必要があります。

 getActiveElement().blur();
5
R3tep

hTMLターゲット<input>および<textarea>、iphone、ipadは空白の領域をタップしてもキーボードを非表示にしません;しかし、Androidはキーボードを非表示にする必要があります-入力ブラーを設定することを意味します;

ここにコードを書きました

$(function(){

    var cacheInput = null;
    var timer = null;
    if(!isApple()){
        return false;
    }
    $(document).on('focus','input',function(e){
        cacheInput = e.target;
    })
    $(document).on('focus','textarea',function(e){
        cacheInput = e.target;
    })
    $(document).on('touchend',function(e){
        if(e.target.tagName!=='INPUT'&&e.target.tagName!=='TEXTAREA'){
            if(cacheInput!==null){
                timer = setTimeout(function(){
                    cacheInput.blur();
                    clearTimeout(timer);
                },300)
            }
        }
    })
    function isApple(){
        var ua = navigator.userAgent.toUpperCase();
        var 
          ipad = ua.indexOf('IPAD')>-1,
          iPod = ua.indexOf('iPod')>-1,
          iphone = ua.indexOf('IPHONE')>-1 ;
        return   ipad || iPod || iphone ;
    }
})

github： https://github.com/wikieswan/iphone-input-blur

デモ： http://wikieswan.github.io/iphone-input-blur

3
wikieswan

ionicアプリケーションでは、入力をインターセプトする本体にディレクティブを使用しました。

MyApp.directive('dismissIosKeyboardOnClick', function () {
        return function (scope, element, attrs) {
          if (cordova.platformId=="ios") {
            element.on("touchstart", function(e) {
              var keyboardDoms = new Set(["INPUT","TEXTAREA","SELECT"]);
              if( keyboardDoms.has(document.activeElement.nodeName) &&
                  !keyboardDoms.has(e.target.nodeName) )
                document.activeElement.blur();
              });
            }
        };
      });

Index.html

<body ... dismiss-ios-keyboard-on-click></body>
2
jrobichaud

これがあなたの問題を解決することを願って、それは単にアクティブな要素へのフォーカスを削除します。

  • JavaScriptの使用
 document.activeElement.blur();
  • JQueryの使用
 $("#Clicked_button_id").click(function() {
    $("#input_field_id").blur();                               
});
1
Mumthezir VP

まあ...あなたは私にこの問題を非常に[〜＃〜] simple [〜＃〜]ソリューション。

ステップ1：入力に現在フォーカスがあるかどうかを確認します。 inputFocused変数の値を変更するときに遅延を追加する必要がある理由については後で説明します。

_var inputFocused = false;
$('input').focus(function(){
        setTimeout(function(){
            inputFocused = true;
        },100);
    });
_

ステップ2：画面または$(window)がタップまたはクリックされた場合にイベントリスナーを追加します。ウィンドウがタップまたはクリックされた場合は、入力に現在フォーカスがあるかどうかを確認します。 trueの場合、ウィンドウをフォーカスする必要があります$(window).focus()、ウィンドウをフォーカスした後、blur（）関数が機能するようになりました！入力要素のフォーカスを外すと、キーボードが自動的に非表示になり、inputFocused変数をfalseに再度設定できます。

_$(window).click(function(){
    if(inputFocused == true){
        $(window).focus();
        var input = $('input');
        input.blur();
        inputFocused = false;
    }
});`
_

SetTimeoutの説明：ユーザーが画面上の任意の場所をタップまたはクリックすると、$(window).click()イベントがトリガーされます（例：ボタンのクリック、入力のクリック、タップ、または画面などをクリックします）。入力をタップすると同時にinputFocusedをtrueに設定すると、$(window).click()イベントがトリガーされ、inputFocusedが-であるかどうかを確認しますtrue次に、仮想キーボードを非表示にするコードを実行します。つまり、入力フィールドにフォーカスを合わせると、キーボードが非表示になり、問題が発生することになります。

そのため、入力フィールドにフォーカスしている間はif(inputFocused == true)内のコードが実行されず、入力フィールドに現在フォーカスがある場合にのみ実行されるように、遅延を追加しています。

試してテストしました！

0
Vashtamyty

これを試して。これは、入力以外の要素にタブを付けるとそれを検出して、ぼかします。

$("html").children().not("#input_field_id").click(function(){
  $("#input_field_id").blur();
});
0
James McDowell

IOSで問題の解決策が見つかるかもしれません。私の設定はiOS 8.3/5Cのサファリです。

私の実験から、Safari/iOSのbody要素はクリックイベントを受け入れないようです。理由は説明できませんが、そのようです。

だから、私がやったことは、ラッパーのdivをbodyのすぐ内側に置き、クリックを受け取れるようにすることです。

Main.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>keyboard hide issue</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        //!SOLUTION
        $('#body-wrapper').click(function(e) {
            console.log('I got clicked');
        });        
    });
</script>
<style>
/* ignore this. Its just styles. ... */
div#body-wrapper {
    height: 200px;
    width: 100%;
    background-color: red;
}
input {
    margin: 10px;
}

</style>
</head>
<body>
    <div id="body-wrapper">
        <input type="text" id="main-input1"/>
        <input type="number" id="main-input2"/>
        <input type="email" id="main-input3"/>
    </div>
    <iframe src="blur.html"></iframe>
</body>
</html>

blur.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur iFrame</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {   
        //!SOLUTION
        $('#wrapper').click(function(e) {
            //do nothing 
        });        
    });
</script>
<style>
/* ignore this. Its just styles. ... */
div#wrapper {
    height: 100px;
    width: 100%;
    background-color: yellow;
}
</style>
</head>
<body>
    <div id="wrapper">
        <input type="number" pattern="[0-9]*" id="main-input"/>
    </div>
    </body>
</html>

どちらのファイルでも、キーボードをうまく非表示にすることができます。繰り返しになりますが、根本的な理由はわかりませんが、ソリューションを複製できない場合はお知らせください。

IPadで試したことはありません。ありがとう...

0
tyskr