Angular中input自动获取焦点采坑

最新推荐文章于 2022-07-22 15:36:07 发布
最新推荐文章于 2022-07-22 15:36:07 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端知识 文章标签： angular javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjq_xdd/article/details/109623885
在Angular项目中，为了实现页面加载时input自动聚焦，原计划使用autofocus属性，但由于URL包含“#/login”导致自动聚焦失败。通过添加标签并使用isPlatformBrowser判断在浏览器环境中手动设置focus，成功解决问题。

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

坑的样子

为了用户体验，我想着用户打开页面时输入用户名的框自动得焦，于是我就直接在input框中加了autofocus属性，结果是这样的：

在这里插入图片描述

代码虽然是写了，但是input还是没有聚焦，而且控制台还报了一句话

在这里插入图片描述

大概意思是 因为文档的URL有一个片段“#/login”，所以自动对焦处理被阻止 纳尼！！！

填坑中

既然自动获取焦点行不通，那就自己手动来吧，先给input打上标签

在这里插入图片描述

接着就拿到这个标签再把input的focus激活试试？试试就试试！

在这里插入图片描述

代码中的 isPlatformBrowser 来判断当前平台是浏览器还是服务器（服务器渲染运行在 Node 环境中）

在这里插入图片描述

结果还真的可以，希望能够帮助到需要的同志吧。

Angular中优雅的实现输入框自动聚焦
2501_90323865的博客
03-24 44
在Angular中实现输入框的自动聚焦既可以使用组件的生命周期，也可以通过自定义指令实现。生命周期方法适合需要父子组件交互的场景，而指令方法则更为通用，可以在任何组件内使用。选择哪种方法取决于具体的项目需求和代码结构。两种方法都避免了使用不确定的延迟时间，使得代码更加可靠和优雅。
angular4获得焦点事件_深究AngularJS如何获取input的焦点（自定义指令）
weixin_39997311的博客
12-20 406
1. 写在前面关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS(JavaScript)的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数。所以，当人家问你如何获取焦点时一般的意思是，如果我进行了某些操作...
深究AngularJS—如何获取input的焦点（自定义指令）
04-30
NULL 博文链接：https://bijian1013.iteye.com/blog/2392443
AngularJS input自动聚焦
待花开花谢的博客
09-02 1万+
当我们在使用ionic进行开发的时候，使用angularjs中的ng-focus指令并没有效果。 比如当我们在需要点击某个按钮然后弹出输入框，并且需要自动聚焦到这个输入框的时候。如果使用angularjs的ng-focus指令，这样是没有任何效果的。 这时候就需要我们重新封装focus指令。 .directive('eventFocus', function(focus) { ret
Angular：页面上输入框自动获取焦点
灿灿大王搭建的黄金屋
08-21 5818
方法一： 在component.ts上，ngOnInit()中写这个方法： document.getElementById('getGuid').focus(); 并且将id绑定到HTML上的输入框上： <input nz-input formControlName="guid" id="getGuid" placeholder="请输入生产批号"> 方法二： 直接在H...
深究AngularJS——如何获取input的焦点（自定义指令）
热门推荐
爱雨轩
05-12 2万+
我佛慈悲，取经（转载）请说明出处，以便更多人来本寺取得真经，阿弥陀佛1. 写在前面关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS（JavaScript）的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数
深究AngularJS如何获取input的焦点（自定义指令）
10-19
在AngularJS中，获取input元素的...通过这个例子，我们可以看到如何利用自定义指令来解决在特定场景下input元素自动获取焦点的问题。这不仅展示了AngularJS指令系统的灵活性，也体现了其与业务逻辑紧密结合的设计理念。
Angular 实现输入框中显示文章标签的实例代码
12-10
为了让`<input>`元素在点击整个`<div>`时获取焦点，我们需要在`<div>`上添加一个事件监听器，使用Angular的模板引用变量`#tagInput`来标识`<input>`元素： ```html (click)="focusTagInput()"> *ngFor="let tag of...
angular 页面输入框自动聚焦或者复选功能走过的坑
bb5240_的博客
07-23 1503
刚开始使用angular的小白，也是刚接触前端的小白， 最近需要实现进入页面输入框自动聚焦或者自动复选功能，当时在网上找了很多方法， 例如 使用 autofocus <input autofocus nz-input placeholder="请输入"> 这个的确是可以实现自动聚焦 但是仅仅只是刚加载页面会聚焦一次，后续就没用了，这边在问过很多博客大佬和自己尝试， 终于解决了问题，在这边记录一下，以便自己以后少走弯路。 首先第一步也是最重要的一步： 在ts里，通过viewChild获取
angular2中的DOM操作之如何使input获取焦点
weixin_30764771的博客
01-09 934
找了半天才找到如何在angular2中操作模板中的DOM： 　　1、 　　2、也可以通过传参数$event（说到参数多说一句：函数调用时传的实参个数不能超过形参个数，允许小于形参个数），然后通过$event.target获取到元素标签，再通过节点关系，如：parentNode,children等； 　　3、注意input获得焦点的事件focus()，当输入框由隐藏变为显示的时候同时让输入...
Angular：input输入框获取不到焦点
dongnihao的博客
07-22 1594
解决方案： 这边试了以下几种方法 1.对input元素添加 autofocus属性，不生效 2.使用angular指令，太烦了不想试 3.模板变量获取元素，然后设置 element.focus( ) ，无效 4.模板变量获取元素，然后设置 element.focus( ) ，放在settimeout中，进入下一轮事件循环，生效之后马上消失。 最后： 把 element.focus( ) 方法放在ngAfterViewInit() 钩子函数内。并且设置一个setTimeout( ). 前几种方式.
个人笔记：input输入框自动获取焦点
weixin_42592438的博客
07-14 2984
 在input标签里写 autofocus
Angular6 中设置标签元素获得焦点
chanchaw的专栏
01-09 3668
打开某个页面就使指定的标签元素获取焦点，下面的贴图依次按照html模板、ts控制器的顺序制定 在线源码 https://stackblitz.com/edit/angular-srcat3?embed=1&amp;amp;file=src/app/app.component.html ...
angular 输入框获取焦点失效的问题
tangdou369098655的博客
04-22 621
重点说明： 假如先设定了 输入框disabled又打开，然后执行获取焦点，可能会失效，这个时候可以把getFocus函数放在定时器里，1秒钟后执行，就可以了哦~ 具体代码如下 html           <input #myInput id="myInputr" nz-input class="myInput" [(ngModel)]="aaa.val
Angular10输入框对焦不起作用，AutoFocus指令
青颜的天空的博客
06-04 1272
有时候页面搜索的时候，搜索框出来后希望输入框自动聚焦 <input type="text" id="searchInput" [(ngModel)]="search.keyword" *ngIf="show" placeholder="输入关键字搜索" autofocus (keyup)="myKeyup($event)"> 却发现这样只能第一次的时候自动聚焦，以后就不可以了。 后来又尝试了autoFocus directive的方法，设置聚焦必须在ngAfterV
Angular6 输入框focus(焦点)问题
DongGu0417的博客
08-28 6744
最近遇上一个小问题，就是angular的输入框添加focus失败。 一开始我是这样写的 <input autoFocus type="text" /> 发现只有打开的第一次才有效果，这不是我所需要的效果。 所以我只能去百度和CSDN上搜索了几种写法，发现还是没有效果，情急之下请教了一些朋友，后来得出下面的写法 Html代码 <input class="input-left" ...
angularJs如何获取input焦点
相约9.28,幸福那一刻
12-20 2369
angularjs文档只会告诉你用自定义指令获取焦点，如代码： var app = angular.module('myApp',[]); app.directive('setFocus', function(){ return function(scope, ele
AngularJS自定义指令深入解析：获取input焦点的技巧
#### 四、自定义指令中获取焦点的实现 在 AngularJS 中，如果要在自定义指令中获取 input 的焦点，通常需要在指令的链接函数中使用 DOM API 来实现。以下是一个简单的示例，展示了如何在自定义指令中聚焦 input ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值