こんにちは、Ryohei(@ityryohei)です!

本記事では、inputに入力されたテキストをtextareaに追加して改行するjQueryのスクリプトをご紹介しています。

処理内容は単純で、input(text)とtextareaを用意しておき、input(text)にテキスト入力後、設置してあるボタンを押下すると、textareaに入力した文字列が出力される、という流れになります。

用途はかなり限定されると思いますが、もし似た処理を実装されることがあれば、参考にしていただければ幸いです。

最初に

本記事では下記の3パターンの処理内容をご紹介しています。

  • 入力されたテキストをtextareaに追加する
  • 入力されたテキストの末尾に改行を付けてtextareaに追加する
  • 入力されたテキストの末尾に改行を付けてtextareaに追加してフォーカスを当てる

それぞれ下記のHTMLを共通で利用します。もし本記事をご覧になりながら同じように実装される場合は下記をご使用いただければと思います。

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div class="box">
    <input class="input" type="text" name="text" value="">
    <button class="button" type="button">テキスト追加</button>
    <textarea class="textarea"></textarea>
</div>

では、解説していきます。

入力されたテキストをtextareaに追加する

まずはベーシックなものから。inputに入力されたテキストを取得して、textareaに追加する処理を実装してみます。

JS

$(function(){
    
    var input = $('.input');
    var button = $('.button');
    var textarea = $('.textarea');

    button.on('click', function(){
        var inputVal = input.val()+'\n';
        textarea.val(inputVal);
    });

});

冒頭でご紹介したHTMLに簡単なスタイルを定義して上記のスクリプトを実装すると、下記のデモのような動きとなります。

DEMO

See the Pen
ExYBQWx
by ryohei (@intotheprogram)
on CodePen.

デモを触っていただくとわかるのですが、inputにテキストを入力した後ボタンを複数回押下すると、textareaの内容が毎回リセット → テキスト追加 という処理になっています。

次項ではこの点を改善して、さらに末尾に改行が追加されるスクリプトを組んでみます。

入力されたテキストの末尾に改行を付けてtextareaに追加する

では早速スクリプトを組んでいきます。課題は下記の2点です。

  • inputに入力されたテキストを取得する際に末尾に改行を付加する
  • textareaにテキストを追加する際にtextareaに存在するテキストが消えないようにする

これらの課題を改善したのが下記のサンプルです。

JS

$(function(){
    
    var input = $('.input');
    var button = $('.button');
    var textarea = $('.textarea');

    button.on('click', function(){
        var inputVal = input.val()+'\n';
        textarea.val(textarea.val() + inputVal);
    });

});

下記のデモにも反映しております。ボタンをクリックするとtextareaにテキストが追加されているかと思います。

See the Pen
Add String to Textarea2|jQuery
by ryohei (@intotheprogram)
on CodePen.

本来であればこれで完成! となるのですが、クライアントの要望でボタンを押した後にtextareaの最終行にフォーカスを当ててほしいとの依頼がありましたので、次項でフォーカスに対応してみます。

入力されたテキストの末尾に改行を付けてtextareaに追加してフォーカスを当てる

下記がフォーカスを当てる処理を追加したスクリプトです。textareaにfocusのメソッドを追加しただけになります。

JS

$(function(){
    
    var input = $('.input');
    var button = $('.button');
    var textarea = $('.textarea');

    button.on('click', function(){
        var inputVal = input.val()+'\n';
        textarea.focus().val(textarea.val() + inputVal);
    });

});

再度デモを更新しました。ボタンを押すとtextareaの最終行にカーソルが当たっているかと思います。

See the Pen
Add String to Textarea3|jQuery
by ryohei (@intotheprogram)
on CodePen.

最後に

いかがでしたでしょうか。

本記事でご紹介した処理を使用する機会はほとんどないかと思います。ただ、inputの値を取得して特定の要素のテキストとして追加する処理は色々と応用が利くかと思いますので、ぜひ活用してくださいね。

以上、jQueryでinputに入力されたテキストをtextareaに追加・改行する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。