移动Safari浏览器：使用Javascript焦点（）在inputfield方法只适用于点击？(M

我似乎无法找到这个问题的解决方案。

我有这样一个简单的输入框。

<div class="search">
   <input type="text" value="y u no work"/>
</div>​

而且我想focus()是一个函数里面。 所以随机函数内（不要紧，它是什么功能）我这行？

$('.search').find('input').focus();

这适用于每一个桌面任何就好了。

然而，它并不在我的iPhone上运行。 该场是没有得到关注和键盘是不是在我的iPhone中。

出于测试目的和你们说明问题我做了一个快速示例：

$('#some-test-element').click(function() {
  $('.search').find('input').focus(); // works well on my iPhone - Keyboard slides in
});

setTimeout(function() {
  //alert('test'); //works
  $('.search').find('input').focus(); // doesn't work on my iPhone - works on Desktop
}, 5000);​

任何想法，为什么focus()将不会在我的iPhone超时功能工作。

要看到活生生的例子，你的iPhone上测试该小提琴。 http://jsfiddle.net/Hc4sT/

更新：

我创建了完全一样的情况下，我目前在我的当前项目面对的问题。

我有一个选择框应该 - 当“改变” - 将焦点设置输入字段和滑动，在iPhone或其他移动设备的kexboard。 我发现焦点（）设置正确，但是键盘显示不出来。 我需要的键盘展现出来。

我上传的testfiles这里http://cl.ly/1d210x1W3Y3W ...如果你测试这个在iPhone上，你可以看到，键盘没有滑出项。

Answer 1:

其实，伙计们，有一种方法。 我挣扎的境地摸不着头脑的http://forstartersapp.com （尝试在iPhone或iPad）。

基本上，Safari浏览器在触摸屏设备是小气，当涉及到focus()荷兰国际集团的文本框。 即使是一些桌面浏览器做的更好，如果你click().focus() 但Safari浏览器在触摸屏设备的设计者意识到这很烦人，以用户在键盘保持上来，使他们成为焦点只出现下列条件：

1）用户点击某个地方和focus()在执行单击事件被调用。 如果你正在做一个AJAX调用，则必须同步做，如与弃用（但仍然存在） $.ajax({async:false})在jQuery的选项。

2）此外-这一个让我忙了一阵子- focus()似乎仍不如果一些其他文本框集中在上班时间。 我有一个“开始”按钮，它做了AJAX，所以我试图模糊的文本框touchstart Go按钮的事件，但只是取得了键盘消失，移动视之前，我有机会完成点击Go按钮。 最后，我想模糊的文本框touchend Go按钮的情况下，这工作就像一个魅力！

当你把＃1和＃2在一起，你会得到一个神奇的结果，将除了设置您的登录表单所有蹩脚的Web登录方式，通过将聚焦在你的密码字段，使他们感到更天然。 请享用！ :)

Answer 2:

最近，我遇到了同样的问题。 我发现，显然是适用于所有设备的解决方案。 你不能这样做异步编程关注，但是当其他一些输入早已开始关注，你可以将焦点切换到你的目标输入。 所以，你需要做的是创建，隐藏，追加到DOM和专注于触发事件，异步操作完成时，只需拨打再次聚焦在目标上输入一个假的输入。 这里有一个例子片段 - 在您的手机上运行。

编辑：

这里有一个代码相同的小提琴 。 显然，你不能运行安装在手机片段（或我做错了什么）。

 var $triggerCheckbox = $("#trigger-checkbox"); var $targetInput = $("#target-input"); // Create fake & invisible input var $fakeInput = $("<input type='text' />") .css({ position: "absolute", width: $targetInput.outerWidth(), // zoom properly (iOS) height: 0, // hide cursor (font-size: 0 will zoom to quarks level) (iOS) opacity: 0, // make input transparent :] }); var delay = 2000; // That's crazy long, but good as an example $triggerCheckbox.on("change", function(event) { // Disable input when unchecking trigger checkbox (presentational purpose) if (!event.target.checked) { return $targetInput .attr("disabled", true) .attr("placeholder", "I'm disabled"); } // Prepend to target input container and focus fake input $fakeInput.prependTo("#container").focus(); // Update placeholder (presentational purpose) $targetInput.attr("placeholder", "Wait for it..."); // setTimeout, fetch or any async action will work setTimeout(function() { // Shift focus to target input $targetInput .attr("disabled", false) .attr("placeholder", "I'm alive!") .focus(); // Remove fake input - no need to keep it in DOM $fakeInput.remove(); }, delay); }); 

 label { display: block; margin-top: 20px; } input { box-sizing: border-box; font-size: inherit; } #container { position: relative; } #target-input { width: 250px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="container"> <input type="text" id="target-input" placeholder="I'm disabled" /> <label> <input type="checkbox" id="trigger-checkbox" /> focus with setTimetout </label> </div> 

Answer 3:

我设法使它与下面的代码工作：

event.preventDefault();
timeout(function () {
    $inputToFocus.focus();
}, 500);

我使用AngularJS所以我创建了解决我的问题一个指令：

指示：

angular.module('directivesModule').directive('focusOnClear', [
    '$timeout',
    function (timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var id = attrs.focusOnClear;
                var $inputSearchElement = $(element).parent().find('#' + id);
                element.on('click', function (event) {
                    event.preventDefault();
                    timeout(function () {
                        $inputSearchElement.focus();
                    }, 500);
                });
            }
        };
    }
]);

如何使用指令：

<div>
    <input type="search" id="search">
    <i class="icon-clear" ng-click="clearSearchTerm()" focus-on-clear="search"></i>
</div>

它看起来像你使用jQuery，所以我不知道是否该指令是任何帮助。

Answer 4:

我有点击时清除文本图标搜索表单。 然而，这个问题（在移动和平板电脑）是，键盘会崩溃/隐藏，作为click事件删除focus从删除input 。

目标 ：清除搜索表单后（点击/点上的X图标） 保持键盘可见 ！

要做到这一点，适用stopPropagation()上，像这样的事件：

function clear ($event) {
    $event.preventDefault();
    $event.stopPropagation();
    self.query = '';
    $timeout(function () {
        document.getElementById('sidebar-search').focus();
    }, 1);
}

而HTML表单：

<form ng-controller="SearchController as search"
    ng-submit="search.submit($event)">
        <input type="search" id="sidebar-search" 
            ng-model="search.query">
                <span class="glyphicon glyphicon-remove-circle"
                    ng-click="search.clear($event)">
                </span>
</form>

Answer 5:

UPDATE

我也试过，但无济于事：

$(document).ready(function() {
$('body :not(.wr-dropdown)').bind("click", function(e) {
    $('.test').focus();
})
$('.wr-dropdown').on('change', function(e) {
    if ($(".wr-dropdow option[value='/search']")) {
        setTimeout(function(e) {
            $('body :not(.wr-dropdown)').trigger("click");
        },3000)         
    } 
}); 

}）;

我很困惑，为什么你说这是行不通的，因为你的jsfiddle工作得很好，但这里是我的建议反正...

试试这行代码上点击事件的setTimeout函数：

document.myInput.focus();

myInput相关的输入标签的name属性。

<input name="myInput">

并使用此代码模糊的领域：

document.activeElement.blur();

Answer 6:

该解决方案的效果很好，我的手机上测试：

document.body.ontouchend = function() { document.querySelector('[name="name"]').focus(); };

请享用

Answer 7:

本地Javascript实现WunderBart的回答。

禁用自动缩放使用的字体大小 。

function onClick() {

  // create invisible dummy input to receive the focus first
  const fakeInput = document.createElement('input')
  fakeInput.setAttribute('type', 'text')
  fakeInput.style.position = 'absolute'
  fakeInput.style.opacity = 0
  fakeInput.style.height = 0
  fakeInput.style.fontSize = '16px' // disable auto zoom

  // you may need to append to another element depending on the browser's auto 
  // zoom/scroll behavior
  document.body.prepend(fakeInput)

  // focus so that subsequent async focus will work
  fakeInput.focus()

  setTimeout(() => {

    // now we can focus on the target input
    targetInput.focus()

    // cleanup
    fakeInput.remove()

  }, 1000)

}

Answer 8:

请尝试使用上自来水，而不是NG-click事件。 我有这个问题。 我解决它通过使搜索表单标签里面我明确的搜索框按钮，并通过抽头代替明确的按钮，NG-点击。 现在工作正常。

文章来源: Mobile Safari: Javascript focus() method on inputfield only works with click?