angular2中的DOM操作之如何使input获取焦点

最新推荐文章于 2022-07-22 15:36:07 发布

转载最新推荐文章于 2022-07-22 15:36:07 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guoqiang-QI/p/8251596.html

文章标签：

#javascript #ViewUI

本文介绍了在Angular2中操作模板DOM的方法，包括通过$event.target获取元素，利用节点关系进行DOM操作，以及解决input获得焦点时显示隐藏的问题。提供了一种原创的解决方案，通过调整input的透明度来实现焦点获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

找了半天才找到如何在angular2中操作模板中的DOM：

　　1、

　　2、也可以通过传参数$event（说到参数多说一句：函数调用时传的实参个数不能超过形参个数，允许小于形参个数），然后通过$event.target获取到元素标签，再通过节点关系，如：parentNode,children等；

　　3、注意input获得焦点的事件focus()，当输入框由隐藏变为显示的时候同时让输入框获得焦点时不能实现的，因为两者是同时进行的，在input执行focus方法想要获得焦点的时候其实还没有显示出来，只有当显示出来之后才可以获得焦点，我看网上很多地方都是用了一个timeout让iinput延迟使得显示过后才执行focus方法，但是这样很不科学，有人可能会问了，这里要是有个onshow事件不就可以在input显示后触发onshow事件就可以了吗，我想说的是教程上说这个onshow方法仅有火狐浏览器支持，但是我在火狐上测试发现也不支持，综合考虑，可以通过控制input的opacity来达到一个假的显示隐藏；因为透明度为0隐藏的时候并不会影响input该有的交互效果，所以能够执行focus方法使其获得焦点，只是它opacity为0你看不见罢了；------》（这条属于原创，目前没有在网上查阅到此解决方案）；

转载于:https://www.cnblogs.com/guoqiang-QI/p/8251596.html