弹框input标签自动获取焦点

最新推荐文章于 2024-11-21 20:02:25 发布

原创最新推荐文章于 2024-11-21 20:02:25 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

6 篇文章

订阅专栏

typescript

4 篇文章

订阅专栏

本文探讨了在HTML中使用autofocus属性的局限性，特别是在模态框场景下。通过TypeScript代码示例，展示了如何在每次打开模态框时，通过手动调用focus()方法确保输入框获得焦点，提供更好的用户体验。

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

html中，只会在页面加载后，点击按钮打开弹窗第一次，会自动获取焦点，之后就打开弹窗就不会再有弹窗事件，所以这样只能直接在页面中的输入框中使用，不适合用在弹窗中

<input type="text"  id="box" autofocus="autofocus">

typescript中，需求：要每次打开模态框都需要获取焦点，所以只能在点击按钮打开弹窗的事件中用ts手动获取焦点了

  openModal(template: TemplateRef<any>) {
    this.curModal = this.modalService.show(template, this.config);
    //  根据Id获取该标签，再给该标签一个简单事件就可以每次打开弹窗，都有获取焦点
    const counter = document.getElementById('box') as HTMLInputElement;
    counter.focus();
  }

效果图：
在这里插入图片描述