【jQuery】inputに入力されたテキストをtextareaに追加・改行する方法2020.02.08jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、inputに入力されたテキストをtextareaに追加して改行するjQueryのスクリプトをご紹介しています。処理内容は単純で、input(text)とtextareaを用意しておき、input(text)にテキスト入力後、設置してあるボタンを押下すると、textareaに入力した文字列が出力される、という流れになります。用途はかなり限定されると思いますが、もし似た処理を実装されることがあれば、参考にしていただければ幸いです。最初に本記事では下記の3パターンの処理内容をご紹介しています。入力されたテキストをtextareaに追加する入力されたテキストの末尾に改行を付けてtextareaに追加する入力されたテキストの末尾に改行を付けてtextareaに追加してフォーカスを当てるそれぞれ下記のHTMLを共通で利用します。本記事をご覧になりながら同じように実装される場合は下記をご使用いただければと思います。class="textarea"></textarea></div>では、解説していきます。入力されたテキストをtextareaに追加する入力されたテキストの末尾に改行を付けてtextareaに追加する入力されたテキストの末尾に改行を付けてtextareaに追加してフォーカスを当てる最後に入力されたテキストをtextareaに追加するまずはベーシックなものから。inputに入力されたテキストを取得して、textareaに追加する処理を実装してみます。});});冒頭でご紹介したHTMLに簡単なスタイルを定義して上記のスクリプトを実装すると、下記のデモのような動きとなります。いう処理になっています。次項ではこの点を改善して、さらに末尾に改行が追加されるスクリプトを組んでみます。入力されたテキストの末尾に改行を付けてtextareaに追加するでは早速スクリプトを組んでいきます。課題は下記の2点です。inputに入力されたテキストを取得する際に末尾に改行を付加するtextareaにテキストを追加する際にtextareaに存在するテキストが消えないようにするこれらの課題を改善したのが下記のサンプルです。});});下記のデモにも反映しております。ボタンをクリックするとtextareaにテキストが追加されているかと思います。なるのですが、クライアントの要望でボタンを押した後にtextareaの最終行にフォーカスを当ててほしいとの依頼がありましたので、次項でフォーカスに対応してみます。入力されたテキストの末尾に改行を付けてtextareaに追加してフォーカスを当てる下記がフォーカスを当てる処理を追加したスクリプトです。textareaにfocusのメソッドを追加しただけになります。});});再度デモを更新しました。ボタンを押すとtextareaの最終行にカーソルが当たっているかと思います。CodePen.最後にいかがでしたでしょうか。本記事でご紹介した処理を使用する機会はほとんどないかと思います。inputの値を取得して特定の要素のテキストとして追加する処理は色々と応用が利くかと思いますので、ぜひ活用してくださいね。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。