页面元素

<input type="text" ref="elInput"/>

<div
style="margin-top:20px;"
@click="confession()"
ref="elBtn">点击使input聚焦
</div>

js代码

methods(){
confession(){
this.$refs.elInput.focus()//显示键盘
}
}

上述代码在是有效的,但是对于input元素不是一直存在页面上,是动态显示的,上述方法就会失效

页面元素

<input v-show="isShow" type="text" ref="elInput"/>
<div
style="margin-top:20px;"
@click="confession()"
ref="elBtn">点击使input聚焦
</div>

js代码

data() {
return {
isShow:false
}
}, methods(){
confession(){
this.isShow=true
this.$nextTick(function(){
this.$refs.elInput.focus()//显示键盘
})
}
}

上述情况,ios下input聚焦是失效的,可以使用下面的方法(让input一直都在页面中)

将input写在页面上,利用定位给input显示在用户看不到的地方,当用户点击按钮时,将input定位到指定位置,显示出来

也可以将input透明度设为0,当用户点击按钮时,将input的透明对设为1

页面元素

<input :class="{'is-show':isShow}" type="text" ref="elInput"/>
<div
style="margin-top:20px;"
@click="confession()"
ref="elBtn">点击使input聚焦
</div>

js代码

data() {
return {
isShow:false,
}
}, methods(){
confession(){
this.isShow=true
this.$refs.elInput.focus()//显示键盘
}
} <style lang="less" scoped>
input{
position:relative;
left:-1000px;
}
.is-show{
left:0;
}
</style>

上面的方法验证成功,注意,confession方法里面的 this.$refs.elInput.focus()这句代码不能放在异步或函数里面,否则也会失效

原因在于ios有所限制:

寻常代码里的focus不会生效,除了在某个UI事件(例如click, touchend等)的直接执行环境中调用focus

注意这个直接环境,它的意思是如果你在setTimeout, promise等异步方式中执行了focus,依然是无效的。

ios上述限制是出于安全机制的考虑

ios上只有用户交互触发的focus事件才会起效,而延时回调的focus是不会触发的

iOS下调用元素的focus方法,input元素不聚焦,键盘不弹起的问题的更多相关文章

  1. 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案

    开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...

  2. call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

    call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注意:该函数的语法与 apply() 方法的语法几乎完全相同,唯一的区别在于,apply()方法接受的是一个参 ...

  3. 安卓端调用h5界面js方法和ios端调用h5界面js方法

      备注:本人为h5开发人员,不懂安卓和ios,这是开发小伙伴对接联调的主代码. 1.iOS端调用h5界面js方法:     2.安卓端调用h5界面js方法: @Override    protect ...

  4. ios下点击穿透focus获取问题

    在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...

  5. Quill编辑器IOS下无法获取焦点的解决方法

    造成Quill-Editor无法获取焦点的大部分原因是Css的问题,罪魁祸首: *{ -webkit-user-select:none; } ios下直接造成无法获取焦点. 解决方法,覆盖以上css设 ...

  6. VC++ MFC单文档应用程序SDI下调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错原因分析及解决办法:glewInit()初始化的错误

    1.问题症状 在VC++环境下,利用MFC单文档应用程序SDI下开发OpenGL程序,当调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错,出错代码如下: OpenG ...

  7. 表单在ios下输入框必须重压或长按才能唤起软键盘

    解决方案: 一.在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:FastClick.prototype.focus = function(t ...

  8. js 获取当前focus 的 input 元素

    document.querySelector("#pro-code").focus(); console.log("focus:" + document.act ...

  9. ios 下 select和option 无法隐藏指定元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Windows下本机简易监控系统搭建(Telegraf+Influxdb+Grafana)--转

    原文地址:http://www.cnblogs.com/liugh/p/6683488.html 一.文件准备 1.1 文件名称 telegraf-1.2.1_windows_amd64.zip in ...

  2. Wireshark filter语法

    过滤器语法 ------------------------------------------------------------- 最简单的过滤允许你检查一个协议或者字段的存在.如果你想查看所有的 ...

  3. sql-查看执行计划的方法

    sql执行计划:把SQL语句拆分为每个的操作步骤组合,按照一定的顺序执行得出结果,查看并看懂执行计划是调优的关键步骤 查看执行计划的方法 DBMS_XPLAN包 sql*plus AUTO trace ...

  4. (转载) 据说年薪30万的Android程序员必须知道的

    据说年薪30万的Android程序员必须知道的帖子 标签: android 2015-03-12 16:52 28705人阅读 评论(14) 收藏 举报 Android中国开发精英 目前包括: And ...

  5. C# 分隔字符串成为字符串数组的方法(保留分隔符)

    要求如下: source string: mmmmmmynameismickeym separator: m result string []: {"m", "m&quo ...

  6. PIC c语言

    rom类型,对于占内存的类型定义为rom类型,跟标准c中的const不一样,const跟rom不能通用,否则编译会报type qualifier dismatch 有些变量定义成了rom型,那么如果改 ...

  7. swift语言点评十八-异常与错误

    1.错误类型与枚举的结合 enum VendingMachineError: Error { case invalidSelection case insufficientFunds(coinsNee ...

  8. ActiveMQ学习笔记(10)----ActiveMQ容错的连接

    1. Failover Protocol 前面讲述的都是Client配置连接到指定的broker上,但是,如果Broker的连接失败怎么办呢?此时,Client有两个选项:要么立刻死掉,要么连接到其他 ...

  9. NetworkX-根据权重画图

    load_data = sio.loadmat(load_path) #阈值处理 mat=np.array(load_data['R']) mat[mat<0]=0 mat[mat<0.4 ...

  10. 关于PY的推导式

    列表推导式: In [26]: [i*2 for i in range(10)] Out[26]: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18] 字典推导式: In [29] ...