javascript

先在 javascript 試試看吧,

比較舊的方法是使用 keyCode 或者是 which 進行判斷,

再來是瀏覽器建議使用的 key 方法

keyCode

可以在 javascript 這樣寫:

<input type="text" onkeydown="handleKeyDown(event)" />
<script>
  function handleKeyDown(event) {
    // 判斷是否為中文輸入法並切換輸入法, 只要是中文 keyCode 都會是 229
    if (event.keyCode === 229) {
      event.target.blur(); // 先讓輸入框失焦
      setTimeout(() => {
        event.target.focus({ preventScroll: true }); // 再重新聚焦到輸入框
      }, 100);
    }
  }
</script>

可以模擬出限制使用者只能輸入英文的效果,

但是其實瀏覽器已經不推薦使用 keyCode 去做判斷,

keyCode 已經被列為過時的 API

key

而是應該是使用 key,

key 返回一個字串,

字串就是按下的按鍵(位置),

像是 Enter 、 a 、 1 等等…

所以如果想靠按鍵的位置直接判斷是哪一個英文就可以使用這邊的方法

在這裡想限制使用者輸入英文,

且自行按下 shift 切換成英文,

改為 key 方法可以使用:

<input type="text" onkeydown="handleKeyDown(event)" />
<script>
  function handleKeyDown(event) {
    if (event.key === "Process") {
      event.target.blur();
      setTimeout(() => {
        event.target.focus({ preventScroll: true });
      }, 100);
    }
  }
</script>

改為使用 key 回傳的 Process 進行判斷就可以了,

Process 的意思就是我們 中文輸入法 會先輸入 注音,

拚 注音 才會變成 中文字符 的過程

angular

再 html 的部分可以這樣寫:

<input type="text" (keydown)="onlyEnKeyDown($event)" #inputEl />

屬性綁定 keydown 事件,

並傳入該屬性事件到我們等等要寫的方法,

然後記得要加上 #inputEl 讓 typescript 可以用 @ViewChild 獲得該元件,

再 typescript 的部分:

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

@Component({
  selector: ...,
  templateUrl: ...,
  styleUrls: [...]
})
export class InputComponent implements OnInit {

  @ViewChild('inputEl') inputEl: ElementRef;

  constructor() { }

  ngOnInit(): void { }

  onlyEnKeyDown(event: KeyboardEvent) {
    if (event.key == 'Process') {
      this.inputEl.nativeElement.blur();
      setTimeout(() => {
        this.inputEl.nativeElement.focus();
      }, 100);
    }
  }
}

@ViewChild 將 html 中的元素綁定到 typescript inputEl 屬性上,

這樣就可以使用 inputEl 訪問 html 中的 input 元素,

在 onlyEnKeyDown 方法中,

當鍵盤事件的 key 為 Process 時,

先用 blur() 使 input 元素失去焦點,

再用 setTimeout() 方法,

經過 100 毫秒後,

focus() 將焦點重新設回 input 元素,

就可以達到限制英文輸入法的效果