[js基礎⑨]inputが未入力の時に、ボタンが非活性になる。

2024年12月16日

inputが未入力の時に、ボタンを非活性にしたい。

よく入力フォームとかで、必須項目のインプットが未入力だとボタンがグレー色で動かせないサイトってありますよね。↓こんな感じでグレーアウトされてるボタンです。

今日はjavascriptで、inputが未入力の時にボタンを非活性にする実装について紹介します。

実装例

下記が実際のコードです。
インプット欄に文字が入力されていないときは、グレーアウトかつ非活性になります

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

コード解説

次にコードを解説します。
①入力欄が空の時に、disabledにする。
textInput.value === ”で入力欄が空か否かを判別できます。

const textInput = document.getElementById('textInput');
const submitButton = document.getElementById('submitButton');

textInput.addEventListener('input', () => {
  if (textInput.value === '') {
    submitButton.disabled = true; // 入力が空ならボタンを無効化
  } else {
    submitButton.disabled = false; // 入力があればボタンを有効化
  }
});

もしも空なら、disabledを有効にして、入力欄に文字があれば無効にします。

②inputがdisableの時のcssを指定する。


button:disabled {
  background-color: #ccc; /* 非活性時の背景色 */
  color: #666;          /* 非活性時の文字色 */
  cursor: not-allowed;  /* 非活性時のカーソル */
}

button:not(:disabled) {
  background-color: #007bff;
  color: white;
}

buttonがdisableの時は、背景色をグレーにして、
buttonがnot(:disabled)の時は、背景色を青色にします。

以上ここまでで、input欄の状態によってボタンを非活性にする実装ができます。