【javaScript・jQuery】改行を禁止にする

JavaScript

2018.12.23

フォームの入力欄でテキストエリアでの改行をできないようにしたいときはあると思います。

そんなときの改行を禁止するためのソースコードを紹介します。
＊「KeyboardEvent.keycode」や「KeyboardEvent.which」でもキー値を取得できますが、非推奨となっているので、使用は避けたほうがいいかもしれないです。
参考：https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent
KeyboardEvent.keyを使えと言っているので、サンプルコードはKeyboardEvent.keyを使っています。

[サンプル]

ソースコードを紹介します。
[index.html]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="#" method="post">
    <!-- 改行をしたくない要素のclassに「cancelEnter」を指定 -->
    <textarea class="cancelEnter" rows="3">改行できません。</textarea></form>
<script src="index.js"></script>

[index.js]

$(function () {
    $('.cancelEnter')
        // cancelEnterとついたクラスにkeydownイベントを付与
        .on('keydown', function (e) {
            // e.key == 'Enter'でエンターキーが押された場合の条件を設定
            if (e.key == 'Enter') {
                // 何もせずに処理を終える
                return false;
            }
        })
});

以下の記事の貼り付けられた文章の改行を削除する方法も組み合わせて、
改行を完全に除去できるテキストエリアを作りましょう。

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

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