JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストエリアの矢印キー操作を無効にする方法

JavaScriptを使えば、テキストエリア（textarea）内での矢印キーによるスクロールを簡単に無効化できます。仕組みとしては、keydownイベントを監視し、矢印キーが押されたタイミングでpreventDefault()を呼び出すことで、ブラウザのデフォルトのスクロール動作をキャンセルします。

実装例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-weight: 500;
      font-size: 18px;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>テキストエリアの矢印キーを無効化する</h1>
<textarea class="AreaText">
Hello world this is some sample text inside the text area element
</textarea>
<div class="result"></div>
<button class="Btn" style="margin: 15px;">Disable arrows</button>
<h3>上のボタンをクリックすると、テキストエリア内での矢印キーによるスクロールが無効になります</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   BtnEle.addEventListener("click", () => {
      window.addEventListener(
         "keydown",
         (event) => {
            if ([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1) {
               event.preventDefault();
            }
         },
         false
      );
      resEle.innerHTML = "矢印キーによるスクロールは無効になりました";
   });
</script>
</body>
</html>

コードの解説

このコードのポイントは以下の通りです。

  • 「Disable arrows」ボタンをクリックすると、windowオブジェクトに対してkeydownイベントリスナーが登録されます。
  • 配列[32, 37, 38, 39, 40]には、スペースキー（32）と4方向の矢印キー（37：左、38：上、39：右、40：下）のキーコードが格納されています。
  • 押されたキーがこれらのコードに一致した場合、event.preventDefault()が実行され、スクロールなどのデフォルト動作がキャンセルされます。
  • 処理後、.result要素に無効化完了のメッセージが表示されます。

なお、event.keyCodeは現在非推奨（deprecated）となっているため、最新の環境ではevent.key（例："ArrowUp"、"ArrowDown"など）を使った判定や、event.codeの利用も検討するとよいでしょう。

出力結果

ボタンをクリックする前の画面は以下の通りです。

JavaScriptでテキストエリアの矢印キー操作を無効にする方法

「Disable arrows」ボタンをクリックするとメッセージが表示され、以降は矢印キーでテキストエリアをスクロールできなくなります。

JavaScriptでテキストエリアの矢印キー操作を無効にする方法

  1. JavaScriptでテキスト入力フィールドのEnterキー押下を検出する方法

    Enterキーの検出にはkeyCode 13を使用するJavaScriptでEnterキーを検出するには、keyCode 13を使用します。まず、テキスト入力フィールドを作成しましょう。<input type="text" id="txtInput">次に、jQueryのon()メソッドとkeyCodeを組み合わせて、Enterキーの押下を検出します。以下が完全なコード例です。コード例<!DOCTYPE html><html lang="en"><head><meta charse

  2. JavaScriptで矢印キーの押下を検出する方法

    JavaScriptで矢印キーの押下を検出するには、onkeydownイベントを使用します。各キーには固有のキーコードが割り当てられており、矢印キーの場合は次の通りです。左矢印キーは「37」、上矢印キーは「38」、右矢印キーは「39」、下矢印キーは「40」です。押されたキーのkeyCodeをswitch文などで判定することで、どの矢印キーが押されたかを識別できます。サンプルコード以下に具体的な実装例を示します。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8&g