Change color of input color

Asked

Viewed 1,368 times

-1

I need a very important help, I have a color input with a color and a text field. How I could change the input(color) color using the text field.

javascript css html5

2 answers

2

Waiting for the event input in the text field.

Just take the value of the text input and apply as color field value:

(function(){

  var text  = document.querySelector('input[type=text]'),
      color = document.querySelector('input[type=color]');
  
  text.addEventListener('input', function(){
    color.value = this.value;
  });
  
})();
<input type='text' placeholder='#RRGGBB'>
<input type='color'>

  • How would activate the function to execute the code ?

  • @Victor The function is already running

  • 1

    But it’s not changing the value ?

  • @Victor If you want the value of "input[type=text]" is updated according to the "input[type=color]" need to add an event "input" to the "input[type=color]", then update the value of "input[type=text]" with the value of "input[type=color]" in the scope of the event. The event "input" is therefore not supported by old browsers, but it fits. It is also possible to detect if it has been changed with requestAnimationFrame and timers, something serves as polyfill. That’s how I would detect the event "input": document.createElement('input').oninput === null.

0


A simple answer like the question:

In this code the only thing I did was update the value of "input[type=color]" using the events oncut, onkeyup, ... of HTMLInputElement.

I added a few extra things.

var hexColorInput = document.getElementById('hex_input'),
    colorSelector = document.getElementById('color_selector');

var updateHex ;

(updateHex = function () {
    hexColorInput.value = colorSelector.value;
})();

colorSelector.addEventListener('input', updateHex);

function updateSelector() {
    var val = hexColorInput.value;
    // adiciona o '#'
    if (val.charAt(0) !== '#') val = '#' + val;

    // expande uma cor desse tamanho: fff
    if (val.length === 4) {
        var red = val.charAt(1);
        red += red;
        var green = val.charAt(2);
        green += green;
        var blue = val.charAt(3);
        blue += blue;

        val = '#' + red + green + blue;
    }

    colorSelector.value = val;
}


['cut', 'keyup', 'paste'].forEach(function(evt) {
    hexColorInput.addEventListener(evt, updateSelector);
});
<input id="color_selector" type="color"/>
<input id="hex_input" type="text">

  • 1

    Amigo.... I would never think of it....... I am working with simple functions based on getElementById and value....

  • <type="color" id="Corum" onchange="trocaCorUm();"> <input type="text" id="legendaCorUm" class="form-control"> /////////JS: Function trocaCorUm(){Document.getElementById("legendaCorUm"). value=Document.getElementById("Corum"). value; } ///FIM JS This color change is for when I put color in input, display Cod #Hex in input text below

  • @Victor You’re trying to tell me something?

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.