在项目需求中,有需要用到输入框在进入这个页面的时候就自动定位获取这个输入框的焦点。
查了许多资料,也问了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进入页面自动获取焦点的更多相关文章

  1. 苹果客户端input时页面自动放大的问题

    一.问题: 最近在用vue测试的时候发现,安卓端在输入框input时不存在页面自动缩放的问题,苹果客户端认为是考虑到用户的体验效果,才出现输入框自动放大的功能.但也收到了不少用户反馈体验效果不周. 二 ...

  2. jquery--blur()事件,在页面加载时自动获取焦点

    jquery--blur()事件会在页面加载时自动获取焦点,应将onblur写到html标签中 <div class="inputbox"> <input typ ...

  3. 页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令

    <body> <div id="app"> <input type="text" value="" id=&q ...

  4. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  5. vue动态设置Iview的多个Input组件自动获取焦点

    1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...

  6. 鼠标经过INPUT时自动获取焦点

    鼠标经过INPUT时自动获取焦点 <input type="text" name="addr" onMouseOver="this.focus( ...

  7. 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  8. 【小程序】bindconfirm点击小键盘触发事件、focus自动获取焦点

    最近在写小程序,项目要求写一个搜索框,在进入页面时就触发input的事件,调出键盘,点小键上的搜索按钮 就触发搜索事件,分享一下. bindconfirm 是点击小键盘上的搜索按钮就触发要执行的方法 ...

  9. 【前台页面 BUG】回车按钮后,页面自动跳转

    点击回车按钮后,页面自动的迅速跳转 原因: 表单隐式提交了. 解决方法: 在方法执行完成后,加上return false; 代码如下: /** * 注册按钮的点击事件 */ $("#regi ...

随机推荐

  1. 解决 Page 'http://localhost:63342/v3/js/math/math.map' requested without authorization页面未授权问题

    用webstorm调试页面时,老是弹出对话框说页面未授权,如下图: 解决方法尝试了两种都有效,感觉第一种是正解通用,第二种大家也可以了解一下作为参考 第一种: File--Settings如下图 第二 ...

  2. 流程控制、if、elif、else,whilie、break、continue的使用

    今日内容 流程控制理论 if判断 while循环 流程控制概念 流程控制就是控制事物的执行流程 执行流程的分类 顺序结构 从上往下依次执行,代码运行流程图如下 分支结构 根据某些条件判断做出不同的运行 ...

  3. Azure KeyVault(四)另类在 .NET Core 上操作 Secrets 的类库方法-----Azure.Security.KeyVault.Secrets

    一,引言 上一篇文章我们在 .Net Core Web 项目中添加了 "Microsoft.Azure.KeyVault" 的 Nuget 包操作 Azure KeyVault 的 ...

  4. 从零开始Pytorch-YOLOv3【笔记】(一)配置文件解读

    前言 这是github上的一个项目YOLO_v3_tutorial_from_scratch,它还有相应的blog对其详细的解读.机器之心翻译了他的tutorial:从零开始PyTorch项目:YOL ...

  5. jQuery Validatede 结合Ajax 表单验证提交

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

  6. 全面解读 AWS Private 5G 的革新理念

    目录 目录 目录 前言 近几年 AWS 在 5G ICT 领域的部署 AWS 与 Verizon 合作推出的 Private MEC 解决方案 AWS 与 Vodafone Business 合作推出 ...

  7. tensorflow源码解析之framework-node

    目录 什么是node node_def 关系图 涉及的文件 迭代记录 1. 什么是node TF中的计算图由节点组成,每个节点包含了一个操作,表示这个节点的作用,比如,如果一个节点的作用是做矩阵乘法, ...

  8. k8s原来这么简单(二)安装k8s1.23集群

    官方文档:安装 kubeadm 安装条件 多台Linux机器 CentOS7 2G以上RAM,2个以上CPU 集群网络互通,可访问外网 关闭防火墙,关闭swap分区 准备安装环境 node IP k8 ...

  9. spring——依赖注入的三种方式

    1 构造器注入(与构造器有直接关系) 默认无参构造 3种构造方式:通过<contructor-arg>调用类中的构造器 下标 <bean id="userService&q ...

  10. 当前分支拉取master的操作 git rebase master

    使用场景 理解rebase 操作步骤 1 git切换至当前开发版本 2 查找需要变基到的branch,不一定是master 3 执行rebase变基 没有冲突的情况 存在冲突的情况 解决冲突 标记冲突 ...