Jak wysłać zdarzenie np. o kliknięciu do buttona?
W Chromie działa mi funkcja click(), ale w FF już nie reaguje : /
0
0
element.click() akurat jest wspierany przez Firefoxa. Sprawdź poniższy kod -- od razu po załadowaniu strony odpala to click(), przez co wyświetlona zostanie wiadomość, że kliknąłeś.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>[JS] wysyłanie zdarzenia o kliknięciu do elementu</title>
</head>
<body>
<p><button>Kliknij mnie!</button></p>
<script type="text/javascript">
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
alert('Kliknąłeś!');
};
btn.click();
</script>
</body>
</html>
0
Racja.
Ale to niestety nadal nie rozwiązuje mojego problemu : /
Metoda click() nie działa w stosunku do inputa typu file, a tego potrzebuję.
W Chrome po odebraniu komunikatu wyświetla się okienko wybierania pliku, w FF czy Operze to nie działa.
Chciałem przerobić input file, bo domyślnie wygląda on różnie w różnych przeglądarkach i generalnie brzydko. Spróbowałem więc zrobić tak:
<input type="text" name="fakefile" class="fakefile" id="fakefile" disabled="true"></input>
<input type="file" name="file" id="file" onChange="fakefile.value=file.value;" class="file"></input>
<input type="button" name="browse" value="Przeglądaj..." class="button" onClick="file.click();"></input>
Klasa 'file' ma style które sprawiają, że kontrolki nie widać (height=0, width=0 itp., bo z display:none w ogóle to nie działało). 'fakefile' służy tylko do tego by ładnie wyglądał na ekranie, pełną funkcję tak naprawdę służy file.
Ma ktoś jakiś pomysł?
0
@whatever123:
No to akurat trafiłeś na wyjątek z tym input[type=file]. Rzeczywiście, Firefox nie obsługuje na tym odpalania zdarzenia click().
Proponuję następujący hack...
Jeśli chodzi o HTML, to podobnie jak masz teraz: wstaw input[type=file], a koło niego jakiś element #fakefile, który sobie ładnie ostylujesz i który będzie udawał input[type=file], ale wyglądający zgodnie z Twoim życzeniem. Następnie nie ukrywaj właściwego input[type=file], tylko pozycjonuj go za pomocą CSS dokładnie nad #fakefile. Możesz skorzystać z z-index i pozycjonowania absolutnego, czy relatywnego. Teraz spraw, by input[type=file] był niewidoczny, ale by wciąż można było na niego normalnie kliknąć. Osiągniesz to ustawiając w CSS własność opacity na 0.
W ten sposób użytkownik będzie klikał na całkowicie przezroczysty input[type=file] i to będzie mu działało, a w tym miejscu będzie widział umieszczony "pod spodem" element #fakefile, odpowiednio ostylowany.