【javaScript・jQuery】貼り付けられたテキストの改行をなくす

JavaScript

2018.12.26

改行を禁止するやり方は、以下を参照

フォームの入力欄でテキストエリアでの改行をできないようにしたいときはあると思います。そんなときの改行を禁止するためのソースコードを紹介します。＊「KeyboardEvent.keycode」や「KeyboardEvent.which」でもキ...

上記の記事で紹介した改行の禁止方法では、エンターキーでの改行を無効にできても、改行されている文章を貼り付けられた場合は、改行されたままテキストエリアに貼り付けられてしまいます。

せっかくテキストエリアなどでの改行を禁止にしても、貼り付けられた文章に対応できなければ意味ないですよね！

今回は貼り付けられた改行コードを削除して、改行をなくす方法を紹介します。

[サンプル]
改行されている文章を貼り付けてフォーカスを外してみましょう。

[index.html]

<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="#" method="post">
    <!-- 改行を削除したい要素のclassに「removeLine」を指定 -->
    <textarea class="removeLine" rows="4">フォーカスを外すと改行が削除されます。</textarea>
</form>
<script src="index.js"></script>

[index.js]

$(function () {
    $('.removeLine').on(
        'blur',
        function () {
            // 要素を取得
            var textarea = $(this);
            // 要素の値を取得
            text = textarea.val();
            // 値の改行を空文字に置き換える
            new_text = text.replace(/\n/g, "");
            if (new_text != text) {
                // 元の値と置き換えた値が等しくなければ新しい値に置き換える
                textarea.val(new_text);
            }
        });
});