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

onchangeイベントは、JavaScriptを使用したカラータイプ入力では機能しません

onchangeイベントは、要素が変更されたときにトリガーされます。以下の構文を使用する必要があります。

onchange="yourFunctionName(this);"

例

<!DOCTYPE html>
<html lang="en">
<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">Choose 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コードエディターでライブサーバーで開くオプションを選択します。

出力

onchangeイベントは、JavaScriptを使用したカラータイプ入力では機能しません

入力タイプの色をクリックすると、コンソールに色の値が表示されます-

onchangeイベントは、JavaScriptを使用したカラータイプ入力では機能しません


  1. HTMLのカラーピッカーで入力タイプフィールドを使用するにはどうすればよいですか？

    は、色付きの入力フィールド用です。カラーピッカーから色を選択できるようになります。 デフォルトのカラーボックスをクリックすると、カラーピッカーが表示されます。ここでは、value属性-を使用してデフォルトの色を設定することもできます。 例 次のコードを実行して、入力タイプcolor-のカラーピッカーを表示してみてください。 <!DOCTYPE html> <html>    <head>       <title>HTML input color</title>  

  2. HTMLDOM入力カラータイププロパティ

    HTML DOM入力色タイププロパティは、入力色のタイプを返す/設定します。 構文 以下は構文です- 文字列値を返す inputColorObject.type タイプの設定 文字列値へ inputColorObject.type = stringValue 文字列値 ここでは、「 stringValue 」は次のようになります- stringValue 詳細 色 入力タイプが色であることを定義します ラジオ 入力タイプが無線であることを定義します テキスト 入力タイプがテキストであることを定義します 例 入力色タイプの例を見てみましょう プロパ