新しく (自動) レンダリングされた dom 要素にフォーカスを設定するにはどうすればよいですか?

Question

ユーザーが入力した文字数に基づいて、テキスト領域と同じ内容に自動的に置き換えられる入力フィールドがあります:

リーリー

私が抱えている問題は、ユーザーが 21 文字目を入力するとフォーカスが失われることです。したがって、22 文字目を入力しても、その文字がテキスト領域に表示されない (フォーカスがない) ため、ユーザーはイライラします。 新しくレンダリングされたテキスト領域にフォーカスを設定するにはどうすればよいですか? ここでの問題は、自動的にレンダリングされることです。それ以外の場合は、テキストエリアに参照を設定して focus() を呼び出すことができます。

別の問題は、21 番目の文字を削除し、テキストエリアから入力要素に戻すことです。

Answer 1

(役に立つかもしれないので、私のコメントをコピーしてください)

input 要素を textarea に置き換えると、ユーザー エクスペリエンスが低下する可能性があります。最初から textarea を使用してみてはいかがでしょうか?入力の長さに基づいてスタイルを変更する場合 (たとえば、20 文字を超える場合は高さを大きくする場合)、CSS を使用してそれを行うことができます。

リーリー リーリー

デモ (@tony19 からフォーク)

Answer 2

コンポーネントで textarea/input をラップし、その mounted フックを使用して focus() を呼び出すことができます。次のコンポーネントに示されています:

リーリー リーリー ＃＃＃＃＃＃デモ＃＃＃＃＃＃

これは技術的には可能ですが、このユーザー エクスペリエンスは理想的ではない可能性があるため、このような集中入力を必要としない他の設計を検討する必要があります (@kien_coi_1997 が示唆しているように)。