Vue 没有焦 点时，中文输入法的问题请教！

Question

目的：
模拟excel 效果，
按tab键切换某单元格A,
此时A单元格是没有焦点的，
当按下键盘上任意字符键时，或双击时， A单元格才获取焦点

模拟代码：
table表格切换 td 中的 input

 case
      // 当按以下键盘键位时, input 获取焦点
      // 问题是这个时候没有焦点,中文输入法 如搜狗 不会出来
      // 造成了,每次切换到当前 input中,  要先出现一个英文字母,然后才是中文
      event.keyCode == 229 || // 中文输入法
      event.keyCode > 47 && event.keyCode < 58 ||
      event.keyCode > 64 && event.keyCode < 91 ||
      event.keyCode > 95 && event.keyCode < 112 ||
      event.keyCode > 186 && event.keyCode < 193 ||
      event.keyCode > 218 && event.keyCode < 223: 
      //  获取当前 input dom
      const inputDOM = document.getElementById(`input${rc.r}-${rc.c}`) as HTMLInputElement
      inputDOM?.focus()
      return

输入中文已解决，
但是就看有没有办法，隐藏 和 显示光标

Answer 1

隐藏光标用css
input{caret-color: transparent;}

直接让input聚焦，输入或者dblclick时设置下光标颜色为黑色

<style>
input{caret-color: transparent;outline:none}
input.input{caret-color: black;}
</style>
<input type="text" oninput="this.classList.add('input')" onblur="this.classList.remove('input')" ondblclick="this.classList.add('input')"/>