我有一個輸入字段，根據使用者輸入的字元數，該輸入字段會自動替換為文字區域和相同的內容：
<textarea v-if="myString.length > 20" v-model="myString"/> <input type="text" v-if="myString.length <= 20" v-model="myString"/>
我遇到的問題是，當使用者輸入第 21 個字元時焦點會遺失。因此，使用者會感到惱火，因為當他鍵入第 22 個字元時，該字元沒有出現在文字區域中（沒有焦點）。 我怎麼才能將焦點設定在新渲染的文字區域上？ 這裡的問題是它會自動渲染。否則我可以在文字區域上設定一個引用並呼叫 focus()。
另一個問題是刪除第 21 個字元以及從文字區域切換回輸入元素。
P粉4594409912024-03-31 20:04:17
（複製我的評論，因為這可能會有所幫助）
用 textarea 取代 input 元素可能會產生糟糕的使用者體驗。為什麼不從一開始就使用 textarea 呢？如果您希望樣式根據輸入長度而改變，例如如果超過 20 個字符，則增加高度，那麼您可以使用 CSS 來做到這一點。
sssccc
示範（分叉來自@tony19）
P粉3331862852024-03-31 17:38:22
您可以將textarea/input 包裝在元件中，並使用其mounted 掛鉤來呼叫其focus()，如以下組件所示：
sssccc
雖然這在技術上是可行的，但這種使用者體驗可能並不理想，您應該考慮其他不需要像這樣集中輸入的設計（如 @kien_coi_1997 所示）。