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

JavaScriptでHTML要素にoninputイベントを追加する方法

HTML要素に入力イベント（oninput）を動的に追加したい場合は、document.getElementById()とaddEventListener()を組み合わせて使用します。この方法なら、HTMLタグに直接属性を記述することなく、JavaScript側から柔軟にイベント処理を設定できます。

実装例

以下がそのJavaScriptコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<label> 値を入力してください：</label>
<input id="enterValue" type="text">
</body>
<script>
   document.getElementById('enterValue').addEventListener("input", function () {
      console.log('値が入力されました');
   });
</script>
</html>

プログラムの実行方法

上記のプログラムを実行するには、ファイル名をanyName.html（index.html）として保存します。その後、VS Codeエディターでファイルを右クリックし、「Open with Live Server」オプションを選択してください。

出力結果

ページを開いた直後の初期表示は以下のとおりです。

JavaScriptでHTML要素にoninputイベントを追加する方法

ユーザーがテキストボックスに値を入力すると、「input」イベントが発火し、ブラウザのコンソールにメッセージが出力されます。

JavaScriptでHTML要素にoninputイベントを追加する方法

ポイント解説

  • addEventListener("input", ...)：第1引数に「input」イベント名を指定することで、ユーザーが入力するたびに関数が呼び出されます。
  • oninput属性との違い：HTMLに直接「oninput="..."」属性を書く代わりに、JavaScriptからイベントリスナーを登録するため、コードの分離（HTMLとJSの役割分担）ができ、保守性が向上します。
  1. JavaScriptでHTMLテーブルの全要素にIF条件を適用する方法

    HTMLテーブル内のすべての要素にIF条件（条件分岐）を適用したい場合は、document.querySelectorAll()とforEach()を組み合わせることで簡単に実現できます。querySelectorAll()で対象の要素をまとめて取得し、forEach()で1つずつループ処理を行いながら、各要素に対して条件判定を実行します。サンプルコード以下がそのコード例です。<!DOCTYPE html> <html lang="ja"> <head>    <meta charset="UTF-8&

  2. HTMLのoninputイベント属性とは？基本構文とサンプルコードをわかりやすく解説

    HTMLのoninputイベント属性は、ユーザーがinput要素やtextarea要素に入力を行ったタイミングで発火するイベント属性です。入力内容が変わるたびにリアルタイムでJavaScriptを実行できるため、入力チェックや文字数カウントなど、インタラクティブなWebページを作成する際に非常に役立ちます。 構文 oninputイベント属性の基本的な構文は以下のとおりです。 <tagname oninput="script"></tagname> サンプルコード ここでは、textarea要素に対してoninputイベント属性を使用した具体例を紹介し