管理焦点

Ionic 在输入、搜索栏和文本区等组件上提供了 setFocus API，允许开发者手动将焦点设置到元素。该 API 应该用来代替 autofocus 属性并在以下位置调用：

¥Ionic provides a setFocus API on components such as Input, Searchbar, and Textarea that allows developers to manually set focus to an element. This API should be used in place of the autofocus attribute and called within:

进入页面时路由应用的 ionViewDidEnter 生命周期事件。

¥The ionViewDidEnter lifecycle event for routing applications when a page is entered.
呈现叠加层时叠加层的 didPresent 生命周期事件。

¥The didPresent lifecycle event for overlays when an overlay is presented.
应用加载时，普通 JavaScript 应用的 appload 事件。

¥The appload event for vanilla JavaScript applications when the application loads.
用户手势或交互的结果。

¥The result of a user gesture or interaction.

为什么不自动对焦？

¥Why not autofocus?

autofocus 属性是一个标准 HTML 属性，允许开发者在页面加载时将焦点设置到某个元素。此属性通常用于将焦点设置到页面上的第一个输入元素。但是，在页面之间导航时，autofocus 属性可能会导致路由应用出现问题。这是因为 autofocus 属性会在页面加载时将焦点设置到元素，但在重新访问页面时不会将焦点设置到元素。了解有关 MDN 网络文档中 autofocus 属性的更多信息。

¥The autofocus attribute is a standard HTML attribute that allows developers to set focus to an element when a page loads. This attribute is commonly used to set focus to the first input element on a page. However, the autofocus attribute can cause issues in routing applications when navigating between pages. This is because the autofocus attribute will set focus to the element when the page loads, but will not set focus to the element when the page is revisited. Learn more about the autofocus attribute in the MDN Web Docs.

平台限制

¥Platform Restrictions

使用 setFocus API 时你应该注意一些平台限制，包括：

¥There are platform restrictions you should be aware of when using the setFocus API, including:

Android 在将焦点设置到元素之前需要用户交互。这就像用户点击屏幕一样简单。

¥Android requires user interaction before setting focus to an element. This can be as simple as a user tapping on the screen.
交互元素只能聚焦 Mobile Safari (iOS) 上用户手势的结果，例如作为按钮单击的结果调用 setFocus。

¥Interactive elements can only focused a result of a user gesture on Mobile Safari (iOS), such as calling setFocus as the result of a button click.

基本用法

¥Basic Usage

下面的示例演示了如何使用 setFocus API 在用户单击按钮时请求焦点位于输入上。

¥The example below demonstrates how to use the setFocus API to request focus on an input when the user clicks a button.

路由

¥Routing

开发者可以使用 ionViewDidEnter 生命周期事件在进入页面时将焦点设置到某个元素。

¥Developers can use the ionViewDidEnter lifecycle event to set focus to an element when a page is entered.

Angular
React
Vue

/* example.component.ts */

import { Component, ViewChild } from '@angular/core';

import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @ViewChild('input') input!: IonInput;

  ionViewDidEnter() {
    this.input.setFocus();
  }
}

import React, { useRef } from 'react';


import { IonInput, IonPage, useIonViewDidEnter } from '@ionic/react';



const Home = () => {
  const input = useRef<HTMLIonInputElement>(null);

  useIonViewDidEnter(() => {
    input.current?.setFocus();
  });

  return (
    <IonPage>
      <IonInput ref={input} label="setFocus" labelPlacement="floating"></IonInput>
    </IonPage>
  );
};

export default Home;

<template>
  <ion-page>
    <ion-input ref="input" label="setFocus" label-placement="floating"></ion-input>
  </ion-page>
</template>

<script setup lang="ts">
  import { IonInput, IonPage, onIonViewDidEnter } from '@ionic/vue';
  import { ref } from 'vue';

  const input = ref();
  onIonViewDidEnter(() => {
    requestAnimationFrame(() => {
      // requestAnimationFrame is currently required due to:
      // https://github.com/ionic-team/ionic-framework/issues/24434
      input.value.$el.setFocus();
    });
  });
</script>

叠加层

¥Overlays

当呈现叠加层时，开发者可以使用 didPresent 生命周期事件将焦点设置到元素。

¥Developers can use the didPresent lifecycle event to set focus to an element when an overlay is presented.

Javascript
Angular
React
Vue

<ion-modal>
  <ion-input></ion-input>
</ion-modal>

<script>
  const modal = document.querySelector('ion-modal');
  modal.addEventListener('didPresent', () => {
    const input = modal.querySelector('ion-input');
    input.setFocus();
  });
</script>

/* example.component.ts */

import { Component, ViewChild } from '@angular/core';

import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  @ViewChild('input') input!: IonInput;

  onDidPresent() {
    this.input.setFocus();
  }
}

<!-- example.component.html -->
<ion-modal (didPresent)="onDidPresent()">
  <ion-input #input></ion-input>
</ion-modal>

import React, { useRef } from 'react';


import { IonInput, IonModal } from '@ionic/react';



const Home = () => {
  const input = useRef<HTMLIonInputElement>(null);

  const onDidPresent = () => {
    input.current?.setFocus();
  };

  return (
    <IonModal onDidPresent={onDidPresent}>
      <IonInput ref={input}></IonInput>
    </IonModal>
  );
};

export default Home;

<template>
  <ion-modal @didPresent="onDidPresent">
    <ion-input ref="input"></ion-input>
  </ion-modal>
</template>

<script setup lang="ts">
  import { IonInput, IonModal } from '@ionic/vue';
  import { ref } from 'vue';

  const input = ref();

  function onDidPresent() {
    input.value.$el.setFocus();
  }
</script>

为什么不自动对焦？​

平台限制​

基本用法​

路由​

叠加层​

目录

为什么不自动对焦？

平台限制

基本用法

路由

叠加层