https://idea-hack.com/courses/lets-learn-how-to-operate-form-elements-with-javascript/lessons/how-to-detect-acquisition-and-change-of-color-picker-value-with-javascript/
https://idea-hack.com/courses/lets-learn-how-to-operate-form-elements-with-javascript/lessons/how-to-detect-acquisition-and-change-of-color-picker-value-with-javascript/

JavaScriptでカラーピッカーの値の取得や変更を検知する方法

JavaScriptでカラーピッカーの値の取得や変更を検知したい

input要素のtype属性をcolorに設定すると、カラーピッカーの利用が可能で、ユーザーが自由に色を選択できます。

JavaSccriptで値を取得するには、input要素にID属性を指定して、要素を参照させて、valueプロパティーの値にアクセスする必要があります。

また、値の変更を検知するにはchangeイベントを利用して、addEventListener()メソッドを使ってイベントハンドラーを追加する必要があります。

プロパティ

プロパティー意味
インプット要素.valueカラーピッカーで変更された色文字列
input tyoe=”color”の仕様

イベント

イベント動作
change値が変更された時に発火
changeイベントの仕様

サンプルコード

サンプルコードとして、カラーの値をそのまま出力するコードを紹介します。

また、値が変更された時にも反映されるようにしています。

Output
Pug
form#targetArea
		.form-group
			input#targetColor(type="color" name="targetColor" rows="10" value="#40739e")
	#formResult 
JavaScript
const targetCheckbox = document.getElementById( 'targetArea' );
const targetResult = document.getElementById( 'formResult' );
const targetColor= document.getElementById( 'targetColor' );

//ページ読み込み時に1度処理
window.addEventListener('DOMContentLoaded', onChange );

//カラーの変更を検知
targetColor.addEventListener( 'change', onChange );

function onChange() {
	targetResult.textContent = `現在のカラーコードは【${targetColor.value}】です。`;
}
インストラクター