Question

我有一个数字类型为

的输入字段

var maxLength = "tabcontrol.ht";
var temp = undefined;
if (f.fName.length <= maxLength.length) {
    temp = f.fName;
} else {
    temp = f.fName.substring(0, f.fName.length - maxLength.length);
}

在普通浏览器中，我输入了一些数字，而且我点击了屏幕，它隐藏了iphone / ipad键盘。

但如果在iframe内，则无效。我们需要明确点击完成按钮。 此问题仅适用于iphone / ipad

这是一个iframe问题。使用Javascript / Jquery的任何修复都将受到高度赞赏。

更新

尝试

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

并在javascript中触发事件时聚焦。他们都没有工作..

 document.activeElement.blur();

focusout不会在iframe内部调用！

我的问题是$(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(); });

答案将按照规定予以奖励！

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

<强>更新

我发现这个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();

Answer 2

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

Answer 3

在一个离子应用程序中，我在身体上使用了一个拦截输入的指令。

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>

Answer 4

希望这会解决你的问题，它只会消除对活动元素的关注。

使用Javascript

 document.activeElement.blur();

使用jQuery

 $("#Clicked_button_id").click(function() {
    $("#input_field_id").blur();                               
});

Answer 5

试试这个。这会检测何时标记除输入之外的任何元素然后使其模糊。

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

Answer 6

我可能会在iOS上为您的问题找到解决方案。我的配置是iOS 8.3 / 5C上的safari。

在我的实验中，我觉得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上试过它。谢谢......

Answer 7

嗯......你可以给我奖励因为我刚刚用 SIMPLE 解决方案解决了这个问题。

第1步 ：检查输入当前是否处于焦点。我稍后会解释为什么我们需要在更改inputFocused变量的值时添加延迟。

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

第2步：如果点击或点击屏幕或$(window)，则添加事件监听器。如果点击或单击窗口，请检查输入当前是否处于焦点。如果 true ，您必须关注窗口$(window).focus()，在关注窗口后，模糊（）功能现在可以正常工作！因此，您现在可以对输入元素进行取消聚焦，然后键盘将自动隐藏，然后再次将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是否为真然后将运行隐藏虚拟键盘的代码。因此，这意味着无论何时聚焦输入字段，键盘都会隐藏，这将是一个问题。

这就是我们添加延迟的原因，以便在我们聚焦输入字段时if(inputFocused == true)内的代码不会运行，并且只有当输入字段当前处于焦点时它才会运行。

经过测试和测试！

点击屏幕时iphone键盘不会隐藏

7 个答案: