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

【JavaScript】入力フィールドに文字が入力されたらボタンの色を変更する方法

Webフォームを作成していると、「テキスト入力欄に何かが入力されたら、ボタンの色を変えてユーザーに視覚的なフィードバックを与えたい」というケースはよくあります。本記事では、JavaScriptのonkeyupイベントとgetElementByIdを使って、この動作をシンプルに実装する方法を解説します。

実装のポイント

今回の仕組みは非常にシンプルです。入力フィールドにonkeyupイベントを設定し、キーが押されるたびに入力値をチェックします。値が空でなければボタンの背景色を緑に、空なら元の水色に戻すという処理を行います。

1. ボタンの準備

まず、色を変更対象となるボタンを用意します。初期状態の背景色は水色（skyblue）に設定しておきます。

<button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>

2. 入力フィールドの準備

次に、このボタンの色を変化させるきっかけとなる入力フィールドです。onkeyup属性に関数changeTheColorOfButtonDemo()を指定することで、キー入力のたびに処理が呼び出されます。

<input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px"
  onkeyup="changeTheColorOfButtonDemo()">

完全なサンプルコード

以下がHTML全体のコードです。そのままコピーして動作を確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
  <label>
    UserName:
  </label>
  <input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px"
    onkeyup="changeTheColorOfButtonDemo()">
  <br><br>
  <button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
</body>
<script>
  function changeTheColorOfButtonDemo() {
    if (document.getElementById("changeColorDemo").value !== "") {
      document.getElementById("buttonDemo").style.background = "green";
    } else {
      document.getElementById("buttonDemo").style.background = "skyblue";
    }
  }
</script>
</html>

コードの解説

changeTheColorOfButtonDemo()関数では、document.getElementById("changeColorDemo").valueで入力フィールドの現在の値を取得しています。値が空文字列（""）でない場合、つまり何かが入力されている状態であれば、ボタンのstyle.backgroundを"green"に変更します。逆に入力が空になれば、元の"skyblue"へ戻すことで、入力の有無に応じた見た目の切り替えを実現しています。

プログラムの実行方法

上記のコードを「anyName.html」（例：index.html）というファイル名で保存してください。その後、Visual Studio Codeでファイルを右クリックし、「Open with Live Server」を選択するとブラウザで確認できます。

実行結果

ページを読み込んだ直後は、ボタンは水色のまま表示されます。

【JavaScript】入力フィールドに文字が入力されたらボタンの色を変更する方法

テキストボックスに何か文字を入力すると、以下のようにボタンの色が水色から緑へと変化します。入力をすべて削除すれば、再び水色に戻ります。

【JavaScript】入力フィールドに文字が入力されたらボタンの色を変更する方法

まとめ

このように、onkeyupイベントと簡単な条件分岐を組み合わせるだけで、入力状態に応じたボタンの色変更を実装できます。フォームの必須項目チェックや送信ボタンのアクティブ表示など、実務でも応用範囲の広いテクニックなので、ぜひ参考にしてみてください。

  1. HTMLフォームで送信ボタン（submitボタン）を使う方法をわかりやすく解説

    HTMLフォームでは、送信ボタン（submitボタン）をクリックするだけで、フォームの内容が自動的に送信されます。フォームを活用すれば、ユーザーからの入力を簡単に受け取ることができます。 HTMLフォームと送信ボタンの基本 ユーザーの入力を受け取るには<form>タグを使用し、その中に各種フォーム要素を配置します。フォーム要素には、テキスト入力欄、ラジオボタン、送信ボタンなど、さまざまな種類があります。 送信ボタンも<input>タグで作成します。このとき、type属性に「submit」を指定するのがポイントです。これにより、クリックした瞬間にフォームデータが自動的に

  2. 【Android開発】ボタンをタップしたときに色を変更する方法をわかりやすく解説

    この記事では、Androidアプリでボタンをクリック（タップ）したときに、ボタンの背景色を変更する方法をステップごとに解説します。サンプルコード付きなので、Android開発の初心者の方でもすぐに試せますよ。 手順1：新規プロジェクトを作成する まずはAndroid Studioで新しいプロジェクトを作成しましょう。メニューから「File」→「New Project」を選択し、必要な項目を入力してプロジェクトを作成します。 手順2：レイアウトファイル（activity_main.xml）を編集する res/layout/activity_main.xml に以下のコードを追加します。ボタン