我該如何將焦點設定在新（自動）渲染的 dom 元素上？

Question

我有一個輸入字段，根據使用者輸入的字元數，該輸入字段會自動替換為文字區域和相同的內容：

<textarea v-if="myString.length > 20" v-model="myString"/>
<input type="text" v-if="myString.length <= 20" v-model="myString"/>

我遇到的問題是，當使用者輸入第 21 個字元時焦點會遺失。因此，使用者會感到惱火，因為當他鍵入第 22 個字元時，該字元沒有出現在文字區域中（沒有焦點）。 我怎麼才能將焦點設定在新渲染的文字區域上？ 這裡的問題是它會自動渲染。否則我可以在文字區域上設定一個引用並呼叫 focus()。

另一個問題是刪除第 21 個字元以及從文字區域切換回輸入元素。

Answer 1

（複製我的評論，因為這可能會有所幫助）

用 textarea 取代 input 元素可能會產生糟糕的使用者體驗。為什麼不從一開始就使用 textarea 呢？如果您希望樣式根據輸入長度而改變，例如如果超過 20 個字符，則增加高度，那麼您可以使用 CSS 來做到這一點。

sssccc

示範（分叉來自@tony19）

Answer 2

您可以將textarea/input 包裝在元件中，並使用其mounted 掛鉤來呼叫其focus()，如以下組件所示：

sssccc

示範

雖然這在技術上是可行的，但這種使用者體驗可能並不理想，您應該考慮其他不需要像這樣集中輸入的設計（如 @kien_coi_1997 所示）。