Ionic 3中Ion-Input的clearOnEdit首次聚焦输入框时失效问题

我之前也碰到过这个问题，确实挺让人困惑的——明明给ion-input设置了clearOnEdit="true"，但页面加载时带初始值（比如示例里的value="3.4"）的输入框，第一次点击聚焦就是不会清空，得第二次聚焦才正常工作。

问题原因 #

这其实是Ionic的clearOnEdit属性的默认逻辑导致的：它只会在输入框的值是用户之前手动编辑过的内容时，再次聚焦才触发清空；而页面初始化时设置的初始值会被判定为“非用户编辑内容”，所以首次聚焦不会触发清空行为。

解决方案 #

这里有两种简单的处理方式，你可以根据需求选择：

方法1：直接在组件中监听ionFocus事件（快速实现）

在模板中给ion-input添加ionFocus事件绑定：

<ion-label text-left text-wrap>Label</ion-label>
<ion-input 
  text-right 
  type="number" 
  step="0.01" 
  clearOnEdit="true" 
  value="3.4"
  (ionFocus)="handleFirstFocus($event)"
></ion-input>

然后在对应的组件类中实现事件处理方法：

handleFirstFocus(event: Event) {
  const input = event.target as HTMLInputElement;
  // 仅在首次聚焦且输入框有值时清空
  if (input.value && !input.dataset.hasBeenFocused) {
    input.value = '';
    input.dataset.hasBeenFocused = 'true';
  }
}

方法2：自定义指令（可复用）

如果你的项目中有多个地方需要这个功能，自定义指令会更方便：

1. 创建一个指令文件（比如clear-on-first-focus.directive.ts）：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appClearOnFirstFocus]'
})
export class ClearOnFirstFocusDirective {
  private hasBeenFocused = false;

  constructor(private el: ElementRef<HTMLInputElement>) {}

  @HostListener('ionFocus') onInputFocus() {
    const input = this.el.nativeElement;
    if (!this.hasBeenFocused && input.value) {
      input.value = '';
      this.hasBeenFocused = true;
    }
  }
}

2. 在模块中声明这个指令，然后在模板中使用：

<ion-label text-left text-wrap>Label</ion-label>
<ion-input 
  text-right 
  type="number" 
  step="0.01" 
  clearOnEdit="true" 
  value="3.4"
  appClearOnFirstFocus
></ion-input>

这样处理后，不管输入框有没有初始值，第一次聚焦都会触发清空，完美解决这个小bug~

内容的提问来源于stack exchange，提问作者user2687482