为什么当点击这个botton的时候无法立即获取到textarea的焦点，换行之后没有字符没有保持垂直居中

Question

 <textarea
      id="textarea"
        ref="textarea"
        v-model="message"
        v-focus
        class="input"
        @focus="onFocus"
        @blur="onBlur"
      ></textarea>
<button @click="edit(item)"></button>

const textarea = ref();
const edit = (item: any) => {
message.value = item.msg
  focus.value = false
  nextTick(() => {
    focus.value = true
      // if (textarea.value) {
      //   textarea.value.focus();
      // }
       const textarea = document.getElementById('textarea');
      if (textarea) {
        textarea.focus();
      }
  })
}

为什么当点击这个botton的时候无法立即获取到textarea的焦点？另外这个textarea多行文本框在换行之后没有字符没有保持垂直居中， 使用vertical-align:middle; overflow-y: auto;这两个属性都不行。要怎么做

Answer 1

【以下回答由 GPT 生成】

问题分析： 1. 点击按钮时无法立即让多行文本框获取焦点的原因可能是因为在点击按钮后，多行文本框的 focus 事件触发时机不正确。 2. 文本未垂直居中的原因可能是因为 CSS 样式设置不正确。

解决方案： 1. 点击按钮时立即让多行文本框获取焦点，可以使用 @click 事件处理程序，并在其中调用 textarea.focus() 方法。不需要使用 nextTick() 来处理。 2. 文本垂直居中可以通过 CSS 样式来实现，设置 line-height 属性为多行文本框的高度，可以确保文本在元素中垂直居中。

修改后的代码：

<textarea
  id="textarea"
  ref="textarea"
  v-model="message"
  v-focus
  class="input"
  @focus="onFocus"
  @blur="onBlur"
  style="line-height: 1.5rem; vertical-align: middle; overflow-y: auto"
></textarea>
<button @click="edit(item)"></button>

// 在 Vue 组件中的方法
methods: {
  edit(item) {
    this.message = item.msg;
    const textarea = document.getElementById('textarea');
    if (textarea) {
      textarea.focus();
    }
  }
}

这样修改后，点击按钮时多行文本框会立即获取焦点，并且换行后的文本会保持垂直居中。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^