onChangeイベントがカラータイプ入力で機能していません

Azeem Haider 2016-09-01 07:02.

私はたくさん検索してStackOverflowで答えを見つけましたが、すべて無駄で、何も機能していません。inputフィールドで色が変わったときの色の値を取得したい。

これが私のコードです。これが機能しない理由を確認してください。

 <input type="color" id="bgcolor" value="#ffffff" onchange="test()" />

JavaScriptコードは次のとおりです。

 function test(){
    console.log('working.....'); 
 }

この機能は、正常に機能しているものonChangeと交換するonclickと機能しませんが、なぜonChangeですか？

javascript jquery html css

6 answers

user2314737 2017-11-24 17:40.

Windows上のChromeとFirefoxの両方で同じ動作が発生します。これは、純粋な黒、純粋な白、またはこれらのいずれかに非常に近い色でのみ発生します。

カラーピッカーを見ると、メインの正方形にカーソルを移動してもrgb値が変化しないことがわかります（垂直スライダーを右に使用すると変化しますが、平均的なユーザーの傾向ではありません）する）。

同じ動作は、同じカラーピッカーを使用する他のアプリケーション（MSpaintやTkinterなど）でも発生しますtkColorChooser.askcolor()。「color」には英国英語のスペル「color」があるため、これがWindowsのデフォルトのカラーピッカーであると思います。これが私のデフォルトの言語選択です。

これを修正するには、開始色としてそうでない、#ffffffまたは#000000（または近い）色を使用します。

<label for="doesntWork1">doesn't work</label> <input type="color" id="doesntWork1" value="#ffffff" onchange="alert(this.value);" />
<p>
<label for="doesntWork2">doesn't work</label> <input type="color" id="doesntWork2" value="#000000" onchange="alert(this.value);" />
<p>
<label for="works1">works</label> <input type="color" id="works1" value="#fdffff" onchange="alert(this.value);" />
<p>
<label for="works2">works</label> <input type="color" id="works2" value="#000002" onchange="alert(this.value);" />

Pugazh 2016-09-01 14:07.

このような値にアクセスします。

function test(t) {
  console.log(t.value);
}

<input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" onkeyup="test(this)" />

Punit Gajjar 2016-09-01 14:10.

これがお役に立てば幸いです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="color" id="bgcolor" value="#ffffff" />
    </body>
    <script>
        $(document).on("change" , "#bgcolor" , function(){ alert($(this).val());
        });
    </script>
</html>

$(document).on("change" , "#bgcolor" , function(){ alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input type="color" id="bgcolor" value="#ffffff" />

OMA 2017-03-30 23:33.

「onchange」イベント（jQueryでは「change」）を使用しているために、さまざまなブラウザで一貫性のない動作をする人がいるこの問題は、色入力に適切なイベントではないために発生します（そのため、機能する場合と機能しない場合があります）特にMacOS Xではそうではありません）。

「oninput」（またはjQueryを使用する場合は「input」）を使用する必要があります。これは、すべてのブラウザーとプラットフォームで正常に機能します。

$('#bgcolor').on('input', function() { console.log($(this).val());
    }
);

Bharat Patel 2016-09-01 14:08.

それは私のために働いています、以下でそれをチェックしてください

function hello()
{
 alert("hi");
}

<input type="color" value="#ff0000" onchange="hello();">

Mohit Tanwani 2016-09-01 14:11.

JavaScriptとJQueryを使用して次のスニペットを試してください。

//Javascript function
function test(t) {
  console.log(t.value);
}
//Jquery function
$('#bgcolor').change(function(){ console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="color" id="bgcolor" value="#ffffff" onchange="test(this)" />

Japanese Thai Turkish