IOS input auto focus 解决方案探究

Imfan 发布于2019-08-22 16:26 / 3368人阅读

摘要：解决方案探究开发过的人都知道，在手机下面处于安全策略考虑，不允许自动获取输入框的焦点并调出虚拟键盘，可是从产品角度来看，往往这样的场景有很多，所以也催生出各种各样的手段，下面介绍一种自认为是挺完美的方案供大家参考业务场景描述页面点击搜索按钮

IOS input auto focus 解决方案探究

开发过hybird的人都知道，在IOS手机下面处于安全策略考虑，不允许JS自动获取input输入框的焦点并调出虚拟键盘，可是从产品角度来看，往往这样的场景有很多，所以也催生出各种各样的hack手段，下面介绍一种自认为是挺完美的方案供大家参考：

业务场景描述：

A页面点击搜索按钮，跳到B页面，B页面的搜索框自动获取焦点并且弹出虚拟键盘。

方案设计：

基于vue（其他框架类似）设计如下：

A、B页面都是不同的路由页面；

在A、B页面公共部分添加一个公共input隐藏输入框并设置唯一id；

将A页面的搜索按钮包一层label节点，并设置for属性指向公共input的id，并设置click事件跳转到B页面；

在B页面的beforeMount中添加监听公共input的input事件，并在监听的回调函数里面去赋值给B页面真正用于显示的input框；

这样就结束了，当我们点击A页面的搜索按钮会触发label for特性显示虚拟弹窗，并跳转到B页面，然后直接按虚拟按键即可完成公共隐藏输入框和真正输入框之间的值的同步赋值；

优点：

以最少的代码完成hack

以最少的改动完成hack

缺点：

唯一的缺点是不能让B页面的输入框一开始的时候有一个光标，这个建议可以写一个通用的input组件，通过CSS hack方式模拟光标显示

结论：

OK，到这里就结束了方案设计了，希望这个思路可以给大家一个参考。

云服务器 GPU云服务器探究关于webrtc直播的探究 focus() focus

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94357.html

Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

CoreDump 2019-08-23 13:46 评论0 收藏0
图片批量上传js+html+css

摘要：上传成功后可以进行业务的下一步操作，自己根据业务写吧后台代码接收前端的文件数据添加图例开始添加图例结束该图例名称已经存在高级基本自定义添加成功添加失败再往后和数据库的交互我就不写了小菜一枚，不正确之处请批评指正如题，图片批量上传，效果如图所示showImg(https://segmentfault.com/img/remote/1460000019409059); showImg(h...

Heier 2019-08-30 11:06 评论0 收藏0
图片批量上传js+html+css

摘要：上传成功后可以进行业务的下一步操作，自己根据业务写吧后台代码接收前端的文件数据添加图例开始添加图例结束该图例名称已经存在高级基本自定义添加成功添加失败再往后和数据库的交互我就不写了小菜一枚，不正确之处请批评指正如题，图片批量上传，效果如图所示showImg(https://segmentfault.com/img/remote/1460000019409059); showImg(h...

VEIGHTZ 2019-08-02 15:16 评论0 收藏0