前端：输入框自动获取鼠标焦点

项目场景：

我这里只需要点击后就可以使用键盘输入文字。
操作流程：点击某个地方（触发方法），显示输入框，同时获取鼠标焦点。

---

问题描述：

点击显示输入框，可直接输入，自动获取鼠标焦点。

---

原因分析：

提示：这里填写问题的分析：
例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。

---

解决方案1：

我在搜索资料时，遇到过两种方案。

第一种方案，直接在输入框上加上如下部分代码：autofocus=“autofocus”

 <textarea name="textArea" id="textArea" class="text-style" placeholder="Press Enter button to finish." 
v-model="inputValue" v-if="showText" @keydown="keyDown($event)" autofocus="autofocus"></textarea>

第一种较为简单，只能是第一次点击才行。
我的使用场景：输入框默认是隐藏的，点击后显示了输入框，输入完毕，按下enter键隐藏了输入框，再次点击会显示输入框，但不会获取焦点。所以使用方案2

---

解决方案2：

不会出现上面问题，但是要设置延时时间。
原因：focus必须延时一段时间才能生效。所以，加上延时函数进行延时处理。

第二种方案：

getFocus(){
   if (this.showText === true){
      setTimeout(() => {
        try {
          document.getElementById("textArea").focus();
        } catch (e) { }
      }, 200); // 设置延时0.2秒
    }
  },

---