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

最新推荐文章于 2024-05-06 16:46:18 发布

phpzx.cn

最新推荐文章于 2024-05-06 16:46:18 发布

阅读量2.4k

点赞数 2

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/Dong_Alex/article/details/119336491

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

phpzx.cn

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ios h5 input focus() 光标不能聚焦到input上

ios为了安全起见, 调用focus方法获取焦点, 必须由真实的用户交互(真实点击)的触发源才生效例如, 直接用$('#input1').focus() , 或者 $('#btn').trigger('click') 触发的, 是不能使 foucs生效但是如果 $('#btn') 如果是真实用户点击, 然后触发了 input的click事件, 再调起foucs, 这样是生效的ios点击事件有延迟, 这里引入FastClick.js 解决示例代码:<!DOCTYPE html&gt.
复制链接

扫一扫