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

2019年5月19日

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

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

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

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

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


 
[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <form action="#" method="post">
        <!-- 改行を削除したい要素のclassに「removeLine」を指定 -->
        <textarea class="removeLine" rows="4">フォーカスを外すと改行が削除されます。</textarea>
    </form>
    <script src="index.js"></script>
</body>
</html>

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

スポンサーリンク