想做出来的效果是想手机淘宝那样，点搜索框跳到新页面，键盘自动出来。淘宝是用原生的，我是 js。试过用原生 js 和 jquery 添加 focus 事件，也试过给一个按钮添加 click 事件绑定 input 的 focus 事件，通过触发 click 事件然后触发 focus ，都没有用~ 几十次中有那么一两次键盘能出来。求大神指导。。。有人也提了同样的问题 https://segmentfault.com/q/10...

果然都有这种需求了，更好的体验，但是目前不行，必须要用户自己触发

移动端 input 元素 focus 的时候调出键盘（自动触发 focus 事件的同时调出键盘）？

6 个回答

安卓我目前没有遇到问题。
然后直接使用input.focus()是无法在ios中调起键盘的，因为ios中input元素的focus必须由事件触发。

此外，如果模拟了触摸事件，但是在setTimeout中延迟执行，也是不行的。这部分可以参考stackoverflow上的case：Mobile Safari Autofocus text field.

来自FastClick团队的大牛指出了IOS下input的获取焦点存在这样的问题：

my colleagues and I found that iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.

综上，要在ios中选中input并调起键盘，可以将focus调用包装在一个用户行为触发的事件中，如点击事件、表单onChange事件等。

解决方案

如果需要模拟触发事件，可以参考manually trigger touch event

u3u

5.5k21224

发布于
2016-09-22

元素获得焦点时本来就会自动弹出虚拟键盘啊
手机访问这个页面：http://output.jsbin.com/huzuv...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input class="focus-element" type="tel">
  <button class="get-focus">获得焦点并弹出虚拟键盘</button>
  <script>
  (function($){
    $('.get-focus').addEventListener('click', function(){
      $('.focus-element').focus();
    });
  })(document.querySelector.bind(document));
  </script>
</body>
</html>

zhangpengju

4

发布于
2016-12-08

新手上路，请多包涵

您好，您的问题解决了吗，我也遇到同样的问题