Trigger-Klick auf HTML 5 Farbauswahl mit JQuery

Innerhalb JQuery sind wir in der Lage auszulösen ‚Klick‘ an einem bestimmten Element mit:Trigger-Klick auf HTML 5 Farbauswahl mit JQuery

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

Obwohl ich habe Schwierigkeiten damit, wenn das Element ein Kommissionierer HTML 5 Farbe und die Eigenschaft 'display' wird von CSS auf 'none' gesetzt.

Normalerweise können wir dies tun, wenn der Eingabetyp ‚Datei‘ oder ...

So ist es trotzdem dieses mit JQuery oder schlicht Javascript zu tun bekommen?

HTML-Elemente

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

JQuery

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

ANTWORT

Ändern Sie den Stil:

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

Quelle

2013-07-18 mdoust

Wollen Sie sagen, dass Sie den Klick auslösen können, wenn die Eingabe sichtbar ist? – adeneo

Sie können es nur auslösen, wenn der Benutzer irgendwo im Dokument klickt –

Wenn das Element keine Standard-Klickfunktionalität hat oder das Element kein '.click()' -Ereignis hat, das an jQuery gebunden ist, funktioniert das nicht . Wenn es so etwas wie ' Go!' ist, wird jQuery den Klick nicht auslösen. – Ohgodwhy

Diese Notwendigkeit Interaktion mit dem Benutzer, dh Sie können es nicht ohne Benutzer auslösen kann irgendwo in dem Dokument klicken:

DEMO

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

Quelle

2013-07-18 16:52:02

Danke für Ihre Antwort. Anstatt also die Eigenschaft 'display' auf 'none' zu setzen, können wir dasselbe Ergebnis erzielen, indem wir das Element irgendwo platzieren, was für den Benutzer nicht sichtbar ist. – mdoust

ya, genau, unter Verwendung der absoluten Position, z. –

@mdoust Ich überprüfe nur, ya jquery Trigger scheint hier zu arbeiten. –

Die akzeptierte Antwort funktioniert gut, außer funktioniert es nicht in MS Edge (Ich persönlich mag es nicht sehr, aber es ist immer noch 6% Marktanteil ab dem Jahr 2017, dh jeder ~ 15. Besucher Ihrer Website hat es)

Also hier ist ein guter alter „Hover-Hack“ Trick, der in allen Browsern funktioniert:

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

und dann an das Farbelement bindet onchange den ausgewählten Wert zu erhalten. Experimentieren Sie mit Breiten/Höhen für Ihr Layout.

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

PS. Ich weiß, es ist "hacky", aber ich habe keine bessere Idee.

Quelle

2017-10-28 10:53:58 Alex

Trigger-Klick auf HTML 5 Farbauswahl mit JQuery

Antwort

Verwandte Themen