点击屏幕时,iPhone键盘不会隐藏

我有一个数字types的input字段

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

在正常的浏览器中,我正在input一些数字,我正在点击屏幕,它隐藏了iPhone / iPad的键盘。

但是,如果它是在内部框架,这是行不通的。 我们需要明确点击完成button。 这个问题只适用于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(); }); 

专注是不是在内部调用iframe!

我的问题是**How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

答案将按照说明奖励!

要移除键盘,您需要将焦点放在input上。

 document.activeElement.blur(); 

用这一行你删除焦点和键盘消失。


在你的情况下,可以在你的身体上添加一个事件,如果你点击一个input就停止这个事件。

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

在离子应用中,我使用了一个拦截input的身体指令。

 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> 

希望这会解决你的问题,它只是消除活动元素的焦点。

  • 使用Javascript
  document.activeElement.blur(); 
  • 使用jQuery
  $("#Clicked_button_id").click(function() { $("#input_field_id").blur(); }); 

尝试这个。 这会检测何时选中input的任何元素,然后将其模糊。

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

我可能有一个解决你的问题在iOS上。 我的configuration是在iOS 8.3 / 5C上的Safari浏览器。

从我的实验看来,Safari / iOS中的body元素不接受任何点击事件。 我无法解释为什么,但似乎是这样。

所以,我所做的是:把一个包装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> 

在这两个文件中,我可以隐藏键盘就好了。 再一次,我不知道其根本原因,但是如果您无法复制解决scheme,请告诉我。

我没有在iPad上试过。 谢谢 …

HTML目标<input><textarea> ,iphone和ipad不会隐藏键盘上的空白区域,但android会! 我们需要手工隐藏键盘 – 这意味着设置input模糊;

这里input代码

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

那么…你可以给我这个奖励,因为我刚刚用一个非常简单的解决scheme解决了这个问题。

步骤1 :检查input当前是否处于焦点。 稍后我会解释为什么我们需要在更改inputFocusedvariables的值时添加延迟。

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

步骤2:如果点击或点击屏幕或$(window)添加一个事件监听器。 如果窗口被点击或点击,请检查input当前是否在焦点上。 如果为true ,则必须在窗口焦点对准窗口$(window).focus()后,才能使用blur()函数! 所以现在可以将input元素的焦点alignment,然后键盘自动隐藏,然后再将inputFocusedvariables设置为false

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

SetTimeout解释:如果用户点击或点击屏幕上的任何地方(例如button点击,input点击,点击或点击屏幕等 $(window).click()事件将触发。 如果点击input,同时将inputFocused设置为true ,则触发$(window).click()事件,然后检查inputFocused是否为true,然后运行隐藏虚拟键盘的代码。 所以这意味着只要你关注一个input栏,键盘就会隐藏起来,这会成为一个问题。

这就是为什么我们要添加一个延迟,以便if(inputFocused == true)中的代码不会在我们对input字段进行聚焦时运行,并且只有当input字段当前处于焦点时才会运行。

尝试和testing!