‹input type=color /› — เปิด colorpicker ด้วย js

ฉันได้รับสิ่งนั้น:

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

และฉันต้องการเปิด colorpicker ของฟิลด์นั้นโดยใช้ 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
อาจซ้ำกันของ เปิด colorpicker มาตรฐานเบราว์เซอร์ด้วย 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

ไม่จำเป็นต้องมีจาวาสคริปต์ เพียงแค่พันป้ายกำกับรอบอินพุต:

<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