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

2018年12月26日2019年7月18日JavaScript,jQuery

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

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

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

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

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

フォーカスを外すと 改行が削除されます。

[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);
            }
        });
});