Mobile Safari:inputfield上的Javascript focus()方法只适用于点击？

Question

我似乎找不到解决这个问题的方法.

我有一个像这样的简单输入字段.

<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.我发现focus()设置正确但键盘没有出现.我需要键盘出现.

我在这里上传了测试文件http://cl.ly/1d210x1W3Y3W ...如果你在iphone上测试它,你可以看到键盘没有滑入.

Answer 1

实际上,伙计们,还有一种方法.我在http://forstartersapp.com(在iPhone或iPad上试试)中大力解决这个问题.

基本上,触摸屏设备上的Safari在focus()文本框方面很吝啬.即使是一些桌面浏览器做,如果你做的更好click().focus().但触摸屏设备上Safari的设计人员在键盘不断出现时意识到这对用户来说很烦人,所以他们只关注以下条件:

1)用户单击某处并focus()在执行click事件时被调用.如果您正在进行AJAX调用,那么您必须同步执行它,例如使用$.ajax({async:false})jQuery中已弃用(但仍然可用)的选项.

2)此外 - 这一个让我忙碌了一段时间 - focus()如果其他一些文本框在当时集中,似乎仍然无法工作.我有一个"Go"按钮,它执行了AJAX,所以我尝试touchstart在Go按钮的事件上模糊文本框,但这只是使键盘消失并移动视口,然后我有机会完成Go按钮上的点击.最后,我尝试touchend在Go按钮的事件上模糊文本框,这就像一个魅力!

当您将#1和#2放在一起时,您将获得一个神奇的结果,通过将焦点放在您的密码字段中,使您的登录表单与所有蹩脚的Web登录表单区别开来,并让他们感觉更加原生.请享用!:)

Answer 2

A native javascript implementation of WunderBart's answer.

Disable auto zoom using font size.

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 3

这个解决方案效果很好，我在我的手机上测试过：

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

享受

Answer 4

我最近遇到了同样的问题.我找到了一个显然适用于所有设备的解决方案.您不能以编程方式执行异步焦点,但是当其他输入已经集中时,您可以将焦点切换到目标输入.所以你需要做的是创建,隐藏,附加到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 5

更新

我也尝试过这个，但没有效果：

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