‹input type=color /› — открыть палитру цветов с помощью js

У меня есть это:

<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

и я хотел бы открыть палитру цветов этого поля с помощью JS. Я пытался:

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').focus()
  );

Но это не открывает палитру цветов. Если это можно сделать с помощью JS, то как?


javascript input
person philipp    schedule 24.04.2017    source источник
comment
Почему .focus() вместо .click()?   -  person Sebastian Simon    schedule 24.04.2017
comment
Возможный дубликат Открыть стандартную для браузера цветовую палитру с javascript без type=color   -  person Yury Tarabanko    schedule 24.04.2017

Ответы (2)


arrow_upward
2
arrow_downward

Для управления вводом цвета требуется щелчок (как кнопка).

document.querySelector('span.opener')
  .addEventListener('click', 
    e => document.querySelector('.btn-invisible').click()
  );
.btn-invisible {
   display: none;
}
<span class="opener">Open</span>
<input type="color" class="btn-invisible" />

person JstnPwll    schedule 24.04.2017
comment
Не знал о методе .click() для таких элементов формы, но он прекрасно работает, спасибо! - person philipp; 24.04.2017
comment
Хотя это работает в Edge, если вы сфокусируете ввод перед щелчком (.focus()) и мягко скроете его (например, opacity: 0). Площадка: jsbin.com/vejuqif/edit - person artin; 30.12.2017

arrow_upward
3
arrow_downward

Нет необходимости в javascript, просто оберните метку вокруг ввода:

<label>
  Open
  <input type="color" style="display:none">
</label>

person Damon    schedule 24.04.2017
comment
Я дам ему выстрелить! - person philipp; 24.04.2017
comment
Я попросил решение JS, поэтому было бы неправильно принять решение, отличное от JS, даже если оно мне сейчас нравится больше, чем с js;) - person philipp; 24.04.2017
comment
Да, я понимаю, что это не совсем то, о чем вы просили, но решил, что это стоит указать в любом случае :). В общем, лучше не использовать JS для выполнения ненужной работы. Больше прослушивателей событий = больше шансов на непредвиденные последствия. - person Damon; 24.04.2017