Bagaimanakah cara saya menetapkan fokus pada elemen dom yang baru (auto) diberikan?

Question

Saya mempunyai medan input yang menggantikan secara automatik dengan kawasan teks dan kandungan yang sama berdasarkan bilangan aksara yang dimasukkan oleh pengguna:

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

Masalah yang saya hadapi ialah tumpuan hilang apabila pengguna memasuki aksara ke-21. Oleh itu, pengguna berasa jengkel kerana apabila dia menaip aksara ke-22, watak itu tidak muncul di kawasan teks (tiada fokus). Bagaimana saya boleh menetapkan fokus pada kawasan teks yang baru diberikan? Masalahnya di sini ialah ia dipaparkan secara automatik. Jika tidak, saya boleh menetapkan rujukan pada textarea dan call focus().

Isu lain ialah mengalih keluar aksara ke-21 dan beralih semula daripada kawasan teks kepada elemen input.

Answer 1

(Salin komen saya kerana ini mungkin membantu)

Bagaimana pula dengan textarea 替换 input 元素可能会产生糟糕的用户体验。为什么不从一开始就使用 textarea? Jika anda mahu gaya berubah berdasarkan panjang input, contohnya meningkatkan ketinggian jika lebih daripada 20 aksara, maka anda boleh melakukannya menggunakan CSS.

sssccc

Demo (garpu daripada @tony19)

Answer 2

Anda boleh menggunakan textarea/input 包装在组件中，并使用其 mounted 挂钩来调用其 focus() seperti yang ditunjukkan dalam komponen berikut:

sssccc

Demo

Walaupun ini secara teknikalnya mungkin, pengalaman pengguna ini mungkin tidak sesuai dan anda harus mempertimbangkan reka bentuk lain yang tidak memerlukan input terpusat seperti ini (seperti yang dicadangkan @kien_coi_1997).