iOS下调用元素的focus方法,input元素不聚焦,键盘不弹起的问题
页面元素
<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元素不聚焦,键盘不弹起的问题的更多相关文章
- 【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案
开篇总结:其实目前无法解决这个bug. 这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘.由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让inp ...
- call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注意:该函数的语法与 apply() 方法的语法几乎完全相同,唯一的区别在于,apply()方法接受的是一个参 ...
- 安卓端调用h5界面js方法和ios端调用h5界面js方法
备注:本人为h5开发人员,不懂安卓和ios,这是开发小伙伴对接联调的主代码. 1.iOS端调用h5界面js方法: 2.安卓端调用h5界面js方法: @Override protect ...
- ios下点击穿透focus获取问题
在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...
- Quill编辑器IOS下无法获取焦点的解决方法
造成Quill-Editor无法获取焦点的大部分原因是Css的问题,罪魁祸首: *{ -webkit-user-select:none; } ios下直接造成无法获取焦点. 解决方法,覆盖以上css设 ...
- VC++ MFC单文档应用程序SDI下调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错原因分析及解决办法:glewInit()初始化的错误
1.问题症状 在VC++环境下,利用MFC单文档应用程序SDI下开发OpenGL程序,当调用glGenBuffersARB(1, &pbo)方法编译通过但执行时出错,出错代码如下: OpenG ...
- 表单在ios下输入框必须重压或长按才能唤起软键盘
解决方案: 一.在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:FastClick.prototype.focus = function(t ...
- js 获取当前focus 的 input 元素
document.querySelector("#pro-code").focus(); console.log("focus:" + document.act ...
- ios 下 select和option 无法隐藏指定元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Windows下本机简易监控系统搭建(Telegraf+Influxdb+Grafana)--转
原文地址:http://www.cnblogs.com/liugh/p/6683488.html 一.文件准备 1.1 文件名称 telegraf-1.2.1_windows_amd64.zip in ...
- Wireshark filter语法
过滤器语法 ------------------------------------------------------------- 最简单的过滤允许你检查一个协议或者字段的存在.如果你想查看所有的 ...
- sql-查看执行计划的方法
sql执行计划:把SQL语句拆分为每个的操作步骤组合,按照一定的顺序执行得出结果,查看并看懂执行计划是调优的关键步骤 查看执行计划的方法 DBMS_XPLAN包 sql*plus AUTO trace ...
- (转载) 据说年薪30万的Android程序员必须知道的
据说年薪30万的Android程序员必须知道的帖子 标签: android 2015-03-12 16:52 28705人阅读 评论(14) 收藏 举报 Android中国开发精英 目前包括: And ...
- C# 分隔字符串成为字符串数组的方法(保留分隔符)
要求如下: source string: mmmmmmynameismickeym separator: m result string []: {"m", "m&quo ...
- PIC c语言
rom类型,对于占内存的类型定义为rom类型,跟标准c中的const不一样,const跟rom不能通用,否则编译会报type qualifier dismatch 有些变量定义成了rom型,那么如果改 ...
- swift语言点评十八-异常与错误
1.错误类型与枚举的结合 enum VendingMachineError: Error { case invalidSelection case insufficientFunds(coinsNee ...
- ActiveMQ学习笔记(10)----ActiveMQ容错的连接
1. Failover Protocol 前面讲述的都是Client配置连接到指定的broker上,但是,如果Broker的连接失败怎么办呢?此时,Client有两个选项:要么立刻死掉,要么连接到其他 ...
- NetworkX-根据权重画图
load_data = sio.loadmat(load_path) #阈值处理 mat=np.array(load_data['R']) mat[mat<0]=0 mat[mat<0.4 ...
- 关于PY的推导式
列表推导式: In [26]: [i*2 for i in range(10)] Out[26]: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18] 字典推导式: In [29] ...