Keith M Keith M - 3 months ago 14
HTML Question

Jquery - Get HTML color input change

I'm trying to catch the change event for an input type="color". I thought it would just be .change(callback) like every other type of input, but it's not firing!

Codepen showing the problem: http://codepen.io/Mythical/pen/EyJLNN

If you select a color in the left color picker it's suppose to fire the change event and do some color conversions on the selected color, and then show the converted color in the right color picker.

Code from the codepen:

HTML

<div class="row container-fluid">
<div class="col-md-4 col">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">RGB 256 Bit to 16 Bit</h3>
</div>
<div class="panel-body">
<input type="color" id="#convert-color">
<input type="color" id="#converted-color">
</div>
</div>

</div>
<div class="col-md-4 col">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-4 col">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>


CSS (SCSS)

body {
background-color: rgb(29, 31, 32);
color: white;
overflow: hidden;
}

.pixel{
width: 100px;
height: 100px;
background-color: orange;
}

.col{
padding-top: 20px;
border-radius: 0;
div.panel.panel-default{
background-color: #333;
border: 2px #242424 solid;

input[type="color"]{
width: 40%;
margin: 0 4%;
height: 120px;
border:none;
background-color: #555;
display: inline-block;
}

div.panel-heading{
background-color: #444;
color: white;
border-bottom: 2px solid #424242;
}
}
}


JavaScript (Jquery)

$(document).ready(function() {
$('#convert-color').change(function() {
var hexColor = $(this).val();
console.log(hexColor);
var rgb = hexToRgb(hexColor);
console.log(JSON.stringify(rgb));
var converted = Color565(rgb.r, rgb.g, rgb.b);
console.log(JSON.stringify(converted));
var r = converted[0];
var g = converted[1];
var b = converted[2];
$('#converted-color').val(rgbToHex(r, g, b));
});
});

function Color565(r, g, b) {
var c = [];
c[0] = r >> 3;
c[1] = g >> 2;
c[2] = b >> 3;
return c;
}

function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}

function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

Answer

Well, I think there is small change you have to in your html code, rather to use the below, where you are placing '#' with id,

<input type="color" id="#convert-color">
<input type="color" id="#converted-color">

Remove it.

  <input type="color" id="convert-color">
  <input type="color" id="converted-color">

There is no need to use # in html. Your code is working fine without it.