‹input type=color /› — buka colorpicker dengan js

Saya punya itu:

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

dan saya ingin membuka colorpicker bidang itu menggunakan JS. Saya telah mencoba:

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

Tapi itu tidak membuka pemilih warna. Kalau itu bisa dilakukan oleh JS, bagaimana caranya?


javascript input
person philipp    schedule 24.04.2017    source sumber
comment
Mengapa .focus() bukannya .click()?   -  person Sebastian Simon    schedule 24.04.2017
comment
Kemungkinan duplikat Buka colorpicker standar browser dengan javascript tanpa type=color   -  person Yury Tarabanko    schedule 24.04.2017

Jawaban (2)


arrow_upward
2
arrow_downward

Kontrol input warna memerlukan satu klik (seperti tombol).

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
Belum tahu tentang metode .click() pada elemen formulir seperti itu, tetapi berfungsi dengan baik, terima kasih! - person philipp; 24.04.2017
comment
Meskipun ini berfungsi di Edge jika Anda memfokuskan input sebelum mengklik (.focus()) dan menyembunyikannya dengan lembut (mis. opacity: 0). Taman bermain: jsbin.com/vejuqif/edit - person artin; 30.12.2017

arrow_upward
3
arrow_downward

Tidak perlu javascript, cukup beri label di sekitar input:

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

person Damon    schedule 24.04.2017
comment
Aku akan menembaknya! - person philipp; 24.04.2017
comment
Saya meminta Solusi JS, jadi tidak tepat menerima solusi non-JS, meskipun sekarang saya lebih menyukainya daripada js ;) - person philipp; 24.04.2017
comment
Ya, saya menyadari bahwa itu bukan apa yang Anda minta, tetapi saya pikir itu layak untuk ditunjukkan :). Secara umum lebih baik menghindari JS melakukan pekerjaan yang tidak perlu. Lebih banyak pendengar acara = lebih banyak kemungkinan terjadinya konsekuensi yang tidak diinginkan. - person Damon; 24.04.2017