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

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

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

そんなときの改行を禁止するためのソースコードを紹介します。
＊「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;
            }
        })
});

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