Angular 14结合Material实现阿拉伯语屏幕键盘：求可用npm包

核心思路 #

放弃依赖不稳定的第三方npm包，自行实现轻量级键盘组件，精准满足「焦点显示、失焦隐藏」的需求，同时适配阿拉伯语从右到左（RTL）的布局特性。

实现步骤 #

1. 创建键盘组件 #

用Angular CLI生成独立组件：

ng generate component arabic-virtual-keyboard

2. 定义阿拉伯语键盘布局与核心逻辑 #

在组件TS文件中配置按键布局，处理按键输入、焦点控制逻辑：

// arabic-virtual-keyboard.component.ts
import { Component, Input, HostListener, ElementRef } from '@angular/core';

@Component({
  selector: 'app-arabic-virtual-keyboard',
  templateUrl: './arabic-virtual-keyboard.component.html',
  styleUrls: ['./arabic-virtual-keyboard.component.scss']
})
export class ArabicVirtualKeyboardComponent {
  @Input() targetInput: HTMLInputElement | HTMLTextAreaElement | null = null;

  // 阿拉伯语标准键盘布局（可按需调整）
  keyboardRows = [
    ['ض', 'ص', 'ث', 'ق', 'ف', 'غ', 'ع', 'ه', 'خ', 'ح', 'ج'],
    ['ش', 'س', 'ي', 'ب', 'ل', 'ا', 'ت', 'ن', 'م', 'ك', 'ط'],
    ['ئ', 'ء', 'ؤ', 'ر', 'لا', 'ى', 'ة', 'و', 'ز', 'ظ'],
    ['⌫', ' ', '↵']
  ];

  constructor(private elementRef: ElementRef) {}

  pressKey(key: string) {
    if (!this.targetInput) return;

    switch (key) {
      case '⌫':
        this.targetInput.value = this.targetInput.value.slice(0, -1);
        break;
      case '↵':
        this.targetInput.value += '\n';
        break;
      case ' ':
        this.targetInput.value += ' ';
        break;
      default:
        this.targetInput.value += key;
    }
    // 触发input事件，确保Angular表单绑定同步
    this.targetInput.dispatchEvent(new Event('input'));
  }

  // 点击键盘外部时，让目标输入框失焦隐藏键盘
  @HostListener('document:click', ['$event'])
  handleOutsideClick(event: MouseEvent) {
    const isClickInside = this.elementRef.nativeElement.contains(event.target);
    if (!isClickInside && this.targetInput) {
      this.targetInput.blur();
    }
  }
}

3. 编写Material风格的键盘模板 #

利用Material按钮组件构建键盘，开启RTL布局：

<!-- arabic-virtual-keyboard.component.html -->
<div class="virtual-keyboard" dir="rtl" *ngIf="targetInput">
  <div *ngFor="let row of keyboardRows" class="keyboard-row">
    <button
      *ngFor="let key of row"
      mat-raised-button
      class="keyboard-key"
      (click)="pressKey(key)"
      [ngClass]="{'wide-key': key === '⌫' || key === '↵' || key === ' '}">
      {{ key }}
    </button>
  </div>
</div>

4. 添加适配样式 #

确保键盘贴合Material设计风格，适配RTL布局：

// arabic-virtual-keyboard.component.scss
.virtual-keyboard {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fafafa;
  padding: 1rem;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.keyboard-key {
  min-width: 3.8rem;
  height: 3rem;
  font-size: 1.3rem;
}

.wide-key {
  min-width: 6rem;
}

5. 在父组件中集成键盘 #

监听输入框的焦点事件，控制键盘的显示与隐藏：

// parent.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { ArabicVirtualKeyboardComponent } from './arabic-virtual-keyboard/arabic-virtual-keyboard.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent {
  @ViewChild('arabicInput') arabicInput!: ElementRef<HTMLInputElement>;
  @ViewChild(ArabicVirtualKeyboardComponent) keyboard!: ArabicVirtualKeyboardComponent;

  onInputFocus() {
    this.keyboard.targetInput = this.arabicInput.nativeElement;
  }

  onInputBlur() {
    this.keyboard.targetInput = null;
  }
}

父组件模板：

<!-- parent.component.html -->
<mat-form-field dir="rtl">
  <mat-label>阿拉伯语输入框</mat-label>
  <input
    matInput
    #arabicInput
    (focus)="onInputFocus()"
    (blur)="onInputBlur()">
</mat-form-field>

<app-arabic-virtual-keyboard></app-arabic-virtual-keyboard>

关键注意事项 #

• 若应用全局为阿拉伯语环境，可在index.html中设置<html dir="rtl">，无需单独为组件配置
• 若使用响应式表单，确保输入框绑定的表单控件能通过input事件同步值
• 可根据需求扩展键盘功能，比如添加大小写切换、符号键盘切换等

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