ios h5 input focus() 光标不能聚焦到input上

ios为了安全起见, 调用focus方法获取焦点, 必须由真实的用户交互(真实点击)的触发源才生效例如, 直接用$('#input1').focus() , 或者 $('#btn').trigger('click') 触发的, 是不能使 foucs生效但是如果 $('#btn') 如果是真实用户点击, 然后触发了 input的click事件, 再调起foucs, 这样是生效的ios点击事件有延迟,

phpzx.cn

2738人浏览 · 2021-08-02 23:40:30

phpzx.cn · 2021-08-02 23:40:30 发布

ios为了安全起见, 调用focus方法获取焦点, 必须由真实的用户交互(真实点击)的触发源才生效

例如, 直接用$('#input1').focus() , 或者 $('#btn').trigger('click') 触发的, 是不能使 foucs生效

但是如果 $('#btn') 如果是真实用户点击, 然后触发了 input的click事件, 再调起foucs, 这样是生效的

ios点击事件有延迟, 这里引入 FastClick.js 解决

示例代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
   <script src="//ios.cdn.wakaifu.com/libs/fastclick/1.0.6/fastclick.min.js"></script>

<style>
input{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-user-select: text;
    user-select: text;
}
</style>
<head>

<body>
<input type="text" id="input1" name="code" onclick="focus()" tab-index="1" autofocus="true">
<button id="btn" onclick="trigger()">点我使input获取焦点</button>
</body>

<script >

$(function() {
    FastClick.attach(document.body);
});

function trigger(){
    $('#input1').trigger('click');
}

function focus(){
    $('#input1').focus();
}

</script>

</body>
</html>