ユーザーが入力した文字数に基づいて、テキスト領域と同じ内容に自動的に置き換えられる入力フィールドがあります:
リーリー私が抱えている問題は、ユーザーが 21 文字目を入力するとフォーカスが失われることです。したがって、22 文字目を入力しても、その文字がテキスト領域に表示されない (フォーカスがない) ため、ユーザーはイライラします。 新しくレンダリングされたテキスト領域にフォーカスを設定するにはどうすればよいですか? ここでの問題は、自動的にレンダリングされることです。それ以外の場合は、テキストエリアに参照を設定して focus() を呼び出すことができます。
別の問題は、21 番目の文字を削除し、テキストエリアから入力要素に戻すことです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
(役に立つかもしれないので、私のコメントをコピーしてください)
リーリー リーリーinput要素をtextareaに置き換えると、ユーザー エクスペリエンスが低下する可能性があります。最初からtextareaを使用してみてはいかがでしょうか?入力の長さに基づいてスタイルを変更する場合 (たとえば、20 文字を超える場合は高さを大きくする場合)、CSS を使用してそれを行うことができます。デモ (@tony19 からフォーク)
コンポーネントで
リーリー リーリー ＃＃＃＃＃＃デモ＃＃＃＃＃＃textarea/inputをラップし、そのmountedフックを使用してfocus()を呼び出すことができます。次のコンポーネントに示されています:これは技術的には可能ですが、このユーザー エクスペリエンスは理想的ではない可能性があるため、このような集中入力を必要としない他の設計を検討する必要があります (@kien_coi_1997 が示唆しているように)。