trigger clic su HTML 5 color picker con JQuery

All'interno JQuery siamo in grado di innescare 'click' su un determinato elemento con:trigger clic su HTML 5 color picker con JQuery

$(selector).trigger('click');

se ho difficoltà facendo in modo che quando l'elemento è un HTML 5 color picker e la proprietà 'display' è impostata su 'none' dai CSS.

Normalmente siamo in grado di fare questo se il tipo di ingresso è 'file' o ...

Quindi c'è comunque di ottenere questo fatto con JQuery o JavaScript pianura?

elementi HTML

input type="color" id="fontSel" style="display: none;" 
div id="fontWrap"

JQuery

$("#fontWrap").click(function(){ 
    $("#fontSel").trigger("click"); 
});

RISPOSTA

cambiare lo stile a:

input type="color" id="fontSel" style="position:absolute; left:-9999px; top:-9999px;"

fonte

2013-07-18 mdoust

Stai dicendo che sei in grado di attivare il clic quando l'input è visibile? – adeneo

È possibile attivarlo solo se l'utente fa clic da qualche parte nel documento –

Se l'elemento non ha una funzionalità di clic predefinita, oppure, l'elemento non ha un evento '.click()' associato da jQuery, allora questo non funzionerà . Se è qualcosa come ' Go!', jQuery non attiverà il clic. – Ohgodwhy

Questa interazione con l'utente bisogno, significa che non è possibile attivare senza utente fa clic da qualche parte nel documento:

DEMO

$("#fontWrap").click(function() { 
    $("#fontSel")[0].click(); 
});

fonte

2013-07-18 16:52:02

Grazie per la risposta. Quindi, invece di impostare la proprietà 'display' su 'none', possiamo ottenere lo stesso risultato posizionando l'elemento da qualche parte che non è visibile all'utente ... – mdoust

ya, esattamente, usando la posizione assoluta ad es. –

@mdoust ho solo controllato, il trigger jQuery sembra funzionare qui. –

La risposta accettata grandi opere, ad eccezione non funziona in MS Edge (Personalmente non mi piace molto, ma è ancora quota di mercato del 6% a partire dal 2017, cioè ogni 15 ° visitatore del tuo sito web ce l'ha)

Quindi, ecco un buon vecchio trucco "hover-hack" che funziona in tutti i browser:

<input type="color" style='opacity:0;width:100px;position:absolute;'/> 
<button>clickme</button>

e quindi associare onchange all'elemento colore per ottenere il valore selezionato. Sperimenta ampiezze/altezze per il tuo layout.

https://jsfiddle.net/Lnzm0sry/2/

PS. So che è "hacky", ma non ho un'idea migliore.

fonte

2017-10-28 10:53:58 Alex

trigger clic su HTML 5 color picker con JQuery

risposta

Problemi correlati