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

【解決】JavaScriptのカラータイプ入力でonchangeイベントが機能しないときの対処法

onchangeイベントは、要素の値が変更されたタイミングで発生するイベントです。カラータイプの入力欄（<input type="color">）でも正しく記述すれば問題なく動作し、ユーザーが選択した色の値をリアルタイムに取得できます。実装の際のポイントは、以下の構文のように関数へ「this」を引数として渡すことです。

onchange="yourFunctionName(this);"

「this」を渡すことで、イベントが発生した要素そのもの（ここではカラーピッカー）を関数内で参照でき、「c.value」のような形で選択された色の値を簡単に取り出せます。

サンプルコード

<!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>
<p>
<label for="color">色を選択</label> <input type="color" id="selectedColor"
value="#985d5d" onchange="showValue(this);" />
</p>
<script>
   function showValue(c){
      console.log(c.value);
   }
</script>
</body>
</html>

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

実行結果

【解決】JavaScriptのカラータイプ入力でonchangeイベントが機能しないときの対処法

カラータイプの入力欄をクリックして色を選択すると、選択した色の値がコンソールに出力されます。

【解決】JavaScriptのカラータイプ入力でonchangeイベントが機能しないときの対処法


  1. HTMLカラーピッカーの使い方を解説！input type="color"で色選択フィールドを作る方法

    HTMLの<input type=color>は、色を選択するための入力フィールドを作成する要素です。このフィールドを使うと、ユーザーはカラーピッカーから直感的に好きな色を選択できるようになります。カラーピッカーの仕組みフォーム上に表示されるデフォルトの色ボックスをクリックすると、カラーピッカーが立ち上がり、そこから任意の色を選べます。また、value属性を指定することで、ページ読み込み時に最初に表示される初期色（デフォルトカラー）を設定することも可能です。なお、value属性には「#RRGGBB」形式の16進数カラーコードを指定します。例えば白色なら「#FFFFFF」と記述します

  2. HTML DOM Input Color type プロパティとは？取得・設定方法をわかりやすく解説

    HTML DOM の Input Color type プロパティは、カラーピッカー（<input type=color>）要素の type 属性の値を取得または設定するために使用されるプロパティです。この記事では、基本的な構文から実際のコード例まで、初心者にもわかりやすく解説します。基本構文type プロパティの使い方は以下の通りです。値を取得する場合inputColorObject.type値を設定する場合inputColorObject.type = stringValue指定できる文字列値（stringValue）設定時に指定できる主な文字列値は以下の通りです。string