ionic3 ion-input进入页面自动获取焦点
在项目需求中,有需要用到输入框在进入这个页面的时候就自动定位获取这个输入框的焦点。
查了许多资料,也问了ionic3的大神,现将知识点记录如下:
1、能不能直接设置ion-input的属性值来达到自动获取焦点的目的
使用autofocus="true"属性值
效果:
⑴在网页端浏览,可以自动获取焦点了,这个方式应该对只需要web端的同学有效。但使用ionic3框架的目的应该是为了制作移动端吧。
⑵在移动端可以获取焦点,但随后就失去焦点了。显然,移动端的获取焦点这个方式是不可行的。
2、代码设置获取焦点
这也是我找到设置焦点大多数人采用的方式。那么应该是找对方向了。
方式:总体思想,找到这个输入框节点,然后进行setfocus()获取焦点。
⑴网友的代码大同小异,但第一步肯定是在页面的html文件中加入输入框。我的案例代码如下:
<ion-input #productID id="user_name" placeholder="产品编号"style="padding-left: 15px"></ion-input>
⑵之后就是在页面的ts文件中对这个输入框进行焦点设置
①找到这个节点
@ViewChild('productID ') myInput ;
②对这个节点进行设置
在这里,分析目的:进入页面就获取焦点,这个应该是需要写在页面的生命周期即钩子里的。
这里有不同的写法,比如:ionViewDidLoad(),constructor(),ngOnInit()等等。这里主要介绍一下不同的页面,获取焦点不同的写法。
写在ionViewDidLoad()方法里,对于启动页的焦点获取可以实现。但当页面是进行跳转的页面时,这个方法要么没有获取焦点要么获取焦点一段时间后就失焦了。代码:
ionViewDidLoad() {
setTimeout(() => {
this.myInput.setFocus();//为输入框设置焦点
},150);
}
写在ionViewDidEnter()方法里,这个方法是当进入页面时触发。这个方法对于进行跳转的页面或启动页均有效。代码:
ionViewDidEnter() {
setTimeout(() => {
this.myInput.setFocus();//为输入框设置焦点
},150);
}
存疑:ionViewDidLoad估计是在应用启动的时候就已经全部加载了所有页面,之后在进行跳转的时候触发了其他的事件,所以导致的失焦。但这也是猜想,请大神多多指教。
ionic3 ion-input进入页面自动获取焦点的更多相关文章
- 苹果客户端input时页面自动放大的问题
一.问题: 最近在用vue测试的时候发现,安卓端在输入框input时不存在页面自动缩放的问题,苹果客户端认为是考虑到用户的体验效果,才出现输入框自动放大的功能.但也收到了不少用户反馈体验效果不周. 二 ...
- jquery--blur()事件,在页面加载时自动获取焦点
jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...
- 页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
<body> <div id="app"> <input type="text" value="" id=&q ...
- 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移
一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...
- vue动态设置Iview的多个Input组件自动获取焦点
1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...
- 鼠标经过INPUT时自动获取焦点
鼠标经过INPUT时自动获取焦点 <input type="text" name="addr" onMouseOver="this.focus( ...
- 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- 【小程序】bindconfirm点击小键盘触发事件、focus自动获取焦点
最近在写小程序,项目要求写一个搜索框,在进入页面时就触发input的事件,调出键盘,点小键上的搜索按钮 就触发搜索事件,分享一下. bindconfirm 是点击小键盘上的搜索按钮就触发要执行的方法 ...
- 【前台页面 BUG】回车按钮后,页面自动跳转
点击回车按钮后,页面自动的迅速跳转 原因: 表单隐式提交了. 解决方法: 在方法执行完成后,加上return false; 代码如下: /** * 注册按钮的点击事件 */ $("#regi ...
随机推荐
- 发现Spring事务的一个实锤bug,官方还拒不承认?你来评评理...
你好呀,我是歪歪. 事情是这样的,上周我正在全神贯注的摸鱼,然后有个小伙伴给我发来微信消息,提出了自己关于事务的一个疑问,并配上两段代码: 先说结论:我认为这是 Spring 事务的一个 bug.但是 ...
- pandas 中dataframe的操作
先用pandas生成数据, import numpy as npimport pandas as pddf= pd.DataFrame(np.arange(30).reshape(6,5),colum ...
- c++11 实现枚举值到枚举名的转换
效果 ``` ENUM_DEFINE ( Color, Red, Blue, ) EnumHelper(Color::Red) -> "Red" EnumHelper(Col ...
- Redis集群-Cluster模式
我理解的此模式与哨兵模式根本区别: 哨兵模式采用主从复制模式,主和从数据都是一致的.全量数据: Cluster模式采用数据分片存储,对每个 key 计算 CRC16 值,然后对 16384 取模,可以 ...
- react 16.8版本新特性以及对react开发的影响
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...
- 微信网页JSDK接口-wx.chooseImage问题
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceTy ...
- MySQL 字符集相关
为了支持各个国家的不同语言,MySQL 从4.0 版本开始支持了很多种字符集,且每种字符集支持了 N 多种排序规则.我们可以在建表的时候指定字符集的排序规则,不指定时会有一个默认规则. 字符集和排序规 ...
- Java基础——日期类Date
一.概述 date代表一个特定的时间,精确到毫秒 二.构造方法 方法名 说明 public Date() 分配一个Date对象,并初始化,以便它代表被分配的时间,精确到毫秒 public Date(l ...
- 算法 | Java 常见排序算法(纯代码)
目录 汇总 1. 冒泡排序 2. 选择排序 3. 插入排序 4. 快速排序 5. 归并排序 6. 希尔排序 6.1 希尔-冒泡排序(慢) 6.2 希尔-插入排序(快) 7. 堆排序 8. 计数排序 9 ...
- 使用tc ingress来限速接收方向
Linux中的QoS分为入口(Ingress)部分和出口(Egress)部分,入口部分主要用于进行入口流量限速(policing),出口部分主要用于队列调度(queuing scheduling).大 ...