CODEWITHSUNDEEP
javascripthtmlmacosgoogle-chrome
user1391445
user1391445

Reputation: 731

How to close an html5 color picker?

In chrome on OSX when you select a color using a input with type=color:

<input name="color" type="color" />

The color picker stays open even after choosing a color. It stays open even when you reload the page.

How can I close this picker popup when a color is chosen?

Upvotes: 8

Views: 7655

Answers (2)

Josh Tuttle
Josh Tuttle

Reputation: 51

This is a old question I stumbled on looking for the same answer. I ended up getting the desired effect by flipping the type attribute to 'text', then back to 'color'.

Figured I'd share in case anyone else is stumbling onto this same post.

// vanilla JS:
input.setAttribute('type','text');
input.setAttribute('type','color');

// jQuery:
$input.attr('type','text').attr('type','color');


// see it in action!

var input = document.getElementById('my-color');

// when you click the color picker, we'll run our code to close it after 2 seconds.
input.addEventListener('focus', function() {
  setTimeout(()=>{
  
    // toggle the type attribute to close the picker!
    input.setAttribute('type','text');
    input.setAttribute('type','color');
    
  }, 2000);
});
<input type="color" value="#ffaacc" id="my-color"/> <- Click me

Upvotes: 5

Patrick D&#39;appollonio
Patrick D&#39;appollonio

Reputation: 2762

The color picker depends heavily on a per-browser, per-platform implementation. There's technically no way to close the color picker programatically as a cross-browser solution.

What you can do instead is using a Javascript solution to render your own, cross-platform color picker like jscolor or similar, those even have proper touch support.

Edit: In this list you can see there's no close event in the input type="color". Further reading tells me that since this is just an input like a text input or range input, it's not something you can "control". The alternative may be creating your own.

Upvotes: 5

Related Questions