【jQuery】inputに入力されたテキストをtextareaに追加・改行する方法

こんにちは、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.