關於Angular/ts-input在IOS的Chrome/Safari上無法輸入的問題

[dase1353]

詢問一下
我在IOS手機用Chrome/Safari開TOCAS官網的Input是正常的
但我自己寫的Angular網頁的登入頁面中
會發生可以在切換輸入框的一瞬間輸入一個字
接著就無法輸入的問題

已確認 一般預設input為正常，套上ts-input就會發生同樣狀況

        <div class="ts-input is-start-icon is-fluid">
          <span class="ts-icon is-user-icon"></span>
          <input type="text" [(ngModel)]="account" (keyup)="onKeyup($event)" placeholder="使用者帳號">
        </div>
        <div class="ts-input is-start-icon is-fluid">
          <span class="ts-icon is-lock-icon"></span>
          <input type="password" [(ngModel)]="password" (keyup)="onKeyup($event)" placeholder="使用者密碼">
        </div>

方便詢問一下是怎麼解決的嗎?
或是是否有大佬遇到相同問題?

[YamiOdymel]

你的 onKeyup 事件裡面有發生什麼事情阻擋輸入嗎 🤔

所謂的「無法輸入」是指可以叫出輸入法，但是打字都無效，

還是每打一個字，輸入法鍵盤就自己又消失不見？

[dase1353]

可以叫出輸入法，但是打字都無效
不過小鍵盤上的方向鍵切換輸入框的一瞬間可以馬上打出一個字

onKeyup 其實只是偵測Enter而已，我有拿掉測試過，一樣會發生

  onKeyup(event: any): void {
    if (event.key === 'Enter') {
      this.login();
    }
  }

以下順便附上登入頁面的HTML好了

<div class="ts-center">
  <div class="ts-box is-positive is-top-indicated">
    <div class="ts-segment" style="width: 300px">
      <div class="ts-wrap is-vertical">
        <div class="ts-space"></div>
        <div class="ts-header is-large is-heavy is-icon">
          <div class="ts-icon is-circular"><img src="一個公司ICON" style="width:150px;"></div>
          <div class="ts-space"></div>
          網站標題
        </div>
        <div class="ts-divider is-section"></div>
        <div class="ts-text is-label ts-center">登入帳密</div>
        <div class="ts-input is-start-icon is-fluid">
          <span class="ts-icon is-user-icon"></span>
          <input type="text" [(ngModel)]="account" (keyup)="onKeyup($event)" placeholder="使用者帳號">
        </div>
        <div class="ts-input is-start-icon is-fluid">
          <span class="ts-icon is-lock-icon"></span>
          <input type="password" [(ngModel)]="password" (keyup)="onKeyup($event)" placeholder="使用者密碼">
        </div>
        <div class="ts-divider is-section"></div>
        <button class="ts-button is-fluid is-circular" style="background: rgb(84, 214, 101);border: 0;"
          (click)="login()">登入</button>
      </div>
    </div>
  </div>
</div>

[YamiOdymel]

如果你透過下列 CSS 能修正這個問題嗎

.ts-input input {
    user-select: initial !important;
    -webkit-user-select: initial !important;
}

[dase1353]

感謝您的協助

經測試 先將上述CSS放進全域Style.scss檔案中
input可以正常打字了