点击屏幕时,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当前是否处于焦点。 稍后我会解释为什么我们需要在更改inputFocused
variables的值时添加延迟。
var inputFocused = false; $('input').focus(function(){ setTimeout(function(){ inputFocused = true; },100); });
步骤2:如果点击或点击屏幕或$(window)
添加一个事件监听器。 如果窗口被点击或点击,请检查input当前是否在焦点上。 如果为true ,则必须在窗口焦点对准窗口$(window).focus()
后,才能使用blur()函数! 所以现在可以将input元素的焦点alignment,然后键盘自动隐藏,然后再将inputFocused
variables设置为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!