移动端页面加载后input自动获得焦点并且弹出自动弹出软键盘,请问怎么弹出?ios中自动获得焦点失效?

要做大佬的小白
  • 390

如题,需要是页面加载完成后,input自动获得焦点,并且自动弹出软键盘,现在的问题是:
1.无法弹出软键盘
2.ios苹果手机浏览器无法自动获得焦点(安卓正常)

html如下:

 <input autofocus id="mobile"  type="tel" placeholder="请输入您的手机号码"/>

请问大神,有没有其他好的解决方法?谢谢!

回复
阅读 11.2k
6 个回答
tonyTang
  • 65

来自FastClick团队的大牛指出了IOS下input的获取焦点存在这样的问题:
我和我的同事发现,iOS将只允许在其他元素上绑定函数来触发focus事件,如果第一个函数调用栈是由非编程触发的事件(这句不知道怎么翻译)。IOS的安全机制开始阻止你触发input元素的focus事件。
就是说如果没有通过某种用户交互,iOS不会(触发focus事件)
可参考这篇文章
github上也有相关的issue:iOS does not show keyboard on .focus()

所以解决的方案你可以试试:(即为输入框绑定一个事件,然后主动触发)
你可以在页面再加一个无关的<div id = '#tickt'> </div>

 $('#tickt').on('click', function() {
    $('#mobile').focus();
   });
  $('#tickt').trigger('click');
Promise.resolve().then(() => {
   input.focus();
});

onload事件里手动触发focus

你试试给input标签加个自动点击事件?页面加载完成后,自动点击一次…模拟手指点击,有时候解决问题可以从多方面考虑。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏