Angular 5实现输入框获焦但不唤起手机键盘的方法求助

我刚好在Angular项目里处理过类似的需求，给你分享几个经过验证的可行方案，完美适配你的场景：

方案一：临时设置readonly配合focus() #

这个思路的核心是利用「只读输入框执行focus()不会唤起键盘」的特性，先让输入框只读并获焦，再快速移除只读状态，这样就能保留光标但不弹出键盘：

组件代码实现 #

在你的组件类中，实现AfterViewInit钩子来处理页面初始化后的逻辑：

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

@Component({
  selector: 'app-your-component',
  template: '<input #targetInput type="text" placeholder="试试我">'
})
export class YourComponent implements AfterViewInit {
  // 通过ViewChild获取目标输入框元素
  @ViewChild('targetInput') targetInput!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    const inputEl = this.targetInput.nativeElement;
    
    // 1. 设置输入框为只读
    inputEl.readOnly = true;
    // 2. 执行focus()，此时不会唤起键盘
    inputEl.focus({ preventScroll: true }); // preventScroll避免页面自动滚动
    // 3. 短延迟后移除只读状态，保留光标
    setTimeout(() => {
      inputEl.readOnly = false;
    }, 50); // 延迟时间可根据浏览器兼容性微调
  }
}

方案二：封装成可复用指令 #

如果多个页面需要这个功能，建议封装成Angular指令，方便全局复用：

1. 创建指令文件 #

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

@Directive({
  selector: '[noKeyboardAutofocus]',
  standalone: false // 若使用Angular 14+，可设为true支持独立组件
})
export class NoKeyboardAutofocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    const inputEl = this.el.nativeElement;
    // 只对input和textarea生效
    if (!['INPUT', 'TEXTAREA'].includes(inputEl.tagName)) return;

    inputEl.readOnly = true;
    inputEl.focus({ preventScroll: true });
    setTimeout(() => {
      inputEl.readOnly = false;
    }, 50);
  }
}

2. 在模块中声明指令 #

import { NgModule } from '@angular/core';
import { NoKeyboardAutofocusDirective } from './no-keyboard-autofocus.directive';

@NgModule({
  declarations: [NoKeyboardAutofocusDirective],
  exports: [NoKeyboardAutofocusDirective] // 导出以便其他组件使用
})
export class YourSharedModule {}

3. 在模板中使用 #

<!-- 直接给输入框添加指令即可 -->
<input noKeyboardAutofocus type="text" placeholder="自动获焦不弹键盘">
<textarea noKeyboardAutofocus placeholder="文本域也支持"></textarea>

兼容性注意事项 #

• 大部分主流移动端浏览器（Chrome、Safari、微信内置浏览器）都支持这个方案，但个别小众浏览器可能有差异，建议测试后调整延迟时间。
• 如果遇到移除readonly后仍弹出键盘的情况，可以尝试在focus事件中阻止默认行为（仅作兜底）：

inputEl.addEventListener('focus', (e) => {
  e.preventDefault();
}, { once: true });

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