Клавиатура iphone не скрывается при нажатии на экран

У меня есть поле ввода с типом номера

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

В обычных браузерах я набираю некоторые цифры, и я нажимаю экран, он скрывает клавиатуру iphone/ipad.

Но это не работает, если оно внутри iframe. нам нужно явно нажать кнопку "Готово". Эта проблема относится только к iphone/ipad

Это проблема iframe. Любое исправление с использованием Javascript/Jquery было бы высоко оценено.

Обновление

Пробовал

 document.activeElement.blur();

и фокус, когда событие запускается в javascript. ни один из них не работает.

   $(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?**

Ответы будут вознаграждены, как указано!

ОТВЕТЫ

Ответ 1

Чтобы удалить клавиатуру, вам необходимо потерять фокус на вашем входе.

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"/>

Ответ 2

В ионном приложении я использовал директиву на теле, которая перехватывает входы.

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>

Ответ 3

Надеюсь, что это решит вашу проблему, просто удалит фокус на активный элемент.

  • Использование Javascript
 document.activeElement.blur();
  • Использование jQuery
 $("#Clicked_button_id").click(function() {
    $("#input_field_id").blur();                               
});

Ответ 4

html target <input> и <textarea>, iphone и ipad не будут скрывать клавиатуру при записи на пустую область, но андроид будет! нам нужно скрыть клавиатуру вручную - это означает установить размытие ввода,

здесь введите код

$(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

demo: http://wikieswan.github.io/iphone-input-blur

Ответ 5

Попробуйте это. Это обнаруживает, когда вы вставляете какой-либо элемент, кроме ввода, а затем размываете его. 

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

Ответ 6

Возможно, у меня может быть решение для вашей проблемы на iOS. Моя конфигурация - это сафари на iOS 8.3/5C.

Из моих экспериментов мне кажется, что элемент body в Safari/iOS не восприимчив к событиям кликов. Я не могу объяснить, почему, но это так.

Итак, что я сделал: поставьте оболочку div только внутри тела и позвольте ей получить щелчок.

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. Спасибо...

Ответ 7

Ну... Вы можете дать мне эту награду, потому что я просто решил эту проблему, используя очень сильное решение 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() будет срабатывать, если пользователь коснется или щелкнет в любом месте экрана (например, нажмите кнопку "Enter", "Enter", нажмите или щелкните экран и т.д.). Если вы нажмете на вход, в то же время установив inputFocused в true, триггеры события $(window).click() затем проверяют, будет ли inputFocused true, затем запустите который скрывает виртуальную клавиатуру. Таким образом, это означает, что всякий раз, когда вы фокусируете поле ввода, клавиатура будет скрываться, и это будет проблемой.

Вот почему мы добавляем задержку, чтобы код внутри if(inputFocused == true) не выполнялся, пока мы фокусируем поле ввода, и оно будет работать только в том случае, если поле ввода в данный момент находится в фокусе.

ИСПЫТАНИЕ И ИСПЫТАНИЕ!