Temat: Podmiana przycisku przeglądaj / browse w <input...

Ostatnio natknąłem się na dość ciekawy problem podczas translacji strony na kilka języków. Otóż ciężko jest podmienić przycisk Przeglądaj/Browse w kontrolce służącej do dodawania pliku. Generalnie ciężko jest podmienić tekst oraz wygląd tego przycisku.
Znalazłem 2 działające sposoby:
1) podmiana przycisku za pomocą obrazka wraz z toną js/ajaxa - odpada bo nie mogę sobie pozwolić na tworzenie obrazków przycisku w programie graficznym (mogą dojść nowe języki) [http://www.quirksmode.org/dom/inputfile.html]
2) sprawienie aby przycisk browse był przeźroczysty a idealnie pod spodem umieścić przycisk, który co prawda nic nie robi, ale za to wygląda i ma możliwy do edycji label [http://tiagoe.blogspot.com/2010/01/css-style-typefile-...]

Istnieją jeszcze rozwiązania dla asp (działa ale nie mam strony w asp) oraz za pomocą activeX oraz inne js (nie działają od IE 6 SP1 z racji dosyć dużych ograniczeń bezpieczeństwa).

Moje pytanie brzmi:
Czy ktokolwiek ma pomysł jak sprawić, aby w rozwiązaniu nr 2, przycisk po naciśnięciu zachowywał się jak prawdziwy przycisk (tzn. po kliknięciu zapadał się) a nie jak statyczny obrazek?

Zauważyłem, że używając skryptu js jestem w stanie wymusić, aby po najechaniu na pole przycisku pokazywała się łapka do kliknięcia (zmiana kursora), nie jestem jednak w stanie spowodować w.w zapadania się przycisku oraz np. zmiany koloru tekstu na przycisku po najechaniu na niego kursorem.Paweł Jędrasiewicz edytował(a) ten post dnia 09.06.10 o godzinie 23:38

Temat: Podmiana przycisku przeglądaj / browse w <input...

a dlaczego nie? link który wkleiłeś nie ma żadnego demo page, więc nie bardzo mogłem się firebugiem pobawić. nie działa po prostu podpięte zdarzenie?

osobiście używałem http://www.appelsiini.net/projects/filestyle/demo.html - pluginu jquery. spokojnie do 'przesłaniającego' elementu można bindować zdarzenia.
może zapominasz, że - skoro przykrywasz przycisk czymś innym - to zdarzenia powinieneś podpinać nie do przycisku, tylko do tego, co go przykrywa? :)

Temat: Podmiana przycisku przeglądaj / browse w <input...

A nie wystarczy taka zmiana w CSS?

Np. dla elementu normalnego ustawić coś w stylu

.element {

border-left: 1px solid black;

border-bottom: 1px solid black;

border-top: 1px solid white;

border-right: 1px solid white;

}

a dla elementu po kliknięciu

.clicked {

border-left: 1px solid white;

border-bottom: 1px solid white;

border-top: 1px solid black;

border-right: 1px solid black;

}

w momencie onClick / onMouseDown ustawić klasę 'clicked', a onMouseUp ustawić klasę 'element'.

Temat: Podmiana przycisku przeglądaj / browse w <input...

Szymon Piłkowski:
osobiście używałem http://www.appelsiini.net/projects/filestyle/demo.html - pluginu jquery. spokojnie do 'przesłaniającego' elementu można bindować zdarzenia.

Rozwiązanie przypomina to pierwsze przeze mnie zaprezentowane. Niestety tak jak wspomniałem - bazuje na obrazkach więc odpada.

może zapominasz, że - skoro przykrywasz przycisk czymś innym - to zdarzenia powinieneś podpinać nie do przycisku, tylko do tego, co go przykrywa? :)

Zdarzenie podpinam pod niewidoczną kontrolkę file - po najechaniu nań kursor się zmienia, natomiast nie wiem jak wymusić np poprzez js aby po wystąpienia zdarzenia na niewidocznym elemencie, przycisk pod spodem się zapadał, podmieniał kolor tekstu, itp.

Temat: Podmiana przycisku przeglądaj / browse w <input...

nie podpinaj zdarzenia pod niewidoczną kontrolkę, zamiast tego spróbuj podpiąć je pod element, który ją zasłania i "udaje" (znajdz go firebugiem).

Temat: Podmiana przycisku przeglądaj / browse w <input...

Szymon Piłkowski:
nie podpinaj zdarzenia pod niewidoczną kontrolkę, zamiast tego spróbuj podpiąć je pod element, który ją zasłania i "udaje" (znajdz go firebugiem).

Niestety to nie działa.

Cały mechanizm działa trochę inaczej niż napisałeś:
Jest zwykła kontrolka input type=file i jest ona niewidoczna za pomocą css.
Idealnie pod nią znajduje się mój przycisk który ma tylko "wyglądać" - nie działają na niego żadne zdarzenia bo jest on przysłonięty przez niewidoczny input type=file.
Zdarzenia da się podpiąć tylko pod ukrytą kontrolkę Browse, ponieważ jest ona na wierzchu. Pytanie czy da się to zrobić inaczej.

Temat: Podmiana przycisku przeglądaj / browse w <input...

To połóż przycisk na kontrolkę -> podpowiedź z-index.

Temat: Podmiana przycisku przeglądaj / browse w <input...

Olga Grabek:
To połóż przycisk na kontrolkę -> podpowiedź z-index.

Parametr z-index neutralizuje działanie wszystkich tych kombinacji przez co po naciśnięciu Browse nie zachodzi żadne zdarzenie.

Jak dotąd najlepsze jest rozwiązanie Bartosza, ale niestety nie można go zaimplementować z racji różnicy w szerokości kolejnych znaków niektórych czcionek.

Problem wciąż nierozwiązany. Kto następny? :)

Temat: Podmiana przycisku przeglądaj / browse w <input...

Paweł Jędrasiewicz:

Olga Grabek:
To połóż przycisk na kontrolkę -> podpowiedź z-index.

Parametr z-index neutralizuje działanie wszystkich tych kombinacji przez co po naciśnięciu Browse nie zachodzi żadne zdarzenie.

Jak dotąd najlepsze jest rozwiązanie Bartosza, ale niestety nie można go zaimplementować z racji różnicy w szerokości kolejnych znaków niektórych czcionek.

Problem wciąż nierozwiązany. Kto następny? :)

Co dokładnie jest twoim problemem? I co znaczy, że różnica szerokości znaków nie pozwala na rozwiązanie Bartka?

Tutaj masz przykładowy kod do podmiany imitującego buttona samym cssem, zmień opacity na 0 oraz dopasuj button do twoich potrzeb.
Oczywiście musisz sobie dodać javascript, który przepisze ścieżkę wybranego pliku i wpisze gdzieś przykładowo na buttonie - rowiązanie jest podane w pierwszym linku, który podawałeś na quirksmode, więc chyba nie będzie problemu?

<!DOCTYPE html>

<html lang="en">

    <head>

		<title>title</title>

		<meta charset="UTF-8">

		<style type="text/css" media="screen">

#wrapper {

	width: 250px;

	height: 30px;

	overflow: hidden;

	position: relative;

	z-index: 0;

}

#userfile {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);

	z-index: 1000;

}

#button {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: #faa;

	z-index: 100;

}



#userfile:hover + #button {	background-color: #aaf; }

#userfile:active + #button { background-color: #afa; }

		</style>

    </head>

    <body>

		<div id="wrapper">

			<input type="file" id="userfile" name="userfile" />

			<div id="button"></div>

		</div>

    </body>

</html>

Temat: Podmiana przycisku przeglądaj / browse w <input...

Jarek Tkaczyk:
Tutaj masz przykładowy kod do podmiany imitującego buttona samym cssem, zmień opacity na 0 oraz dopasuj button do twoich potrzeb.
Oczywiście musisz sobie dodać javascript, który przepisze ścieżkę wybranego pliku i wpisze gdzieś przykładowo na buttonie - rowiązanie jest podane w pierwszym linku, który podawałeś na quirksmode, więc chyba nie będzie problemu?

Problemu nie będzie, chyba że chcesz podmienić label Browse :P ....

Jarek Tkaczyk:
Co dokładnie jest twoim problemem?

Problem był opisany w pierwszym poście: jak podmienić wygląd i tekst na przycisku Browse kontrolki input type=file.

Jarek Tkaczyk:
I co znaczy, że różnica szerokości znaków nie pozwala na rozwiązanie Bartka?

Zauważ, że w podlinkowanym kodzie css istnieją takie elementy: (resztę wyciąłem aby się lepiej czytało)
.file_input_div
{
width: 100px;
height: 23px;
}

Odpowiadają one za wielkość niewidocznego przycisku Browse który przesłania "podrobiony" przeze mnie przycisk.

Wystarczy sobie wyobrazić taką sytuację:
W sytuacji gdy na moim podrobionym przycisku istnieje tekst "Przeglądaj foldery w celu zaimportowania pliku" (głupi przykład :P), to mniej więcej od połowy przycisku nie jest on przysłaniany niewidocznym elementem input type=file, przez co zdarzenie otwarcia okna wyboru pliku nigdy nie nastąpi.

Próbowałem rozwiązać to następująco: program czyta zmienną uzależnioną od języka, która ma się pojawić na przycisku. Liczy długość stringa i mnoży x10px, które to później są dopisane do parametru width: <dlugosc_zmiennej x 10>px;

Nie jest to zbyt mądre ponieważ porównując dwa 5-znakowe stringi, np: ZZZZZ oraz lllll, przy czcionce typu Arial (a taka u mnie ma być) od razu widać, że pierwszy string jest szerszy niż drugi.

Przez co w przypadku stringa nr 2 niewidoczne pole input type=file będzie za szerokie, a dla stringa nr 1 będzie OK. Aż strach pomyśleć co wyjdzie przy greckim alfabecie lub chińskich krzaczkach a takie też mają być...

Prezentowany przeze mnie problem jest tak naprawdę pierdołą. Próbowane rozwiązania są ciężkimi armatami, a jednak nie za bardzo nawet armatą można go pokonać.

Czy ma ktoś jeszcze jakiś pomysł? Może zaistniejemy w sieci z 3 - najlepszym rozwiązaniem? :))))

Temat: Podmiana przycisku przeglądaj / browse w <input...

Paweł Jędrasiewicz:

[ciach]

Dosłownie można odpowiedzieć - nie ma uniwersalnego rozwiązania, bo przycisk 'browse' jest wyświetlany zgodnie z ustawieniami przeglądarki (istnieje nawet css appearance, ale niewiele tu pomoże).

Spójrz na mój kod - jest tam width 100%, oprócz tego dodałem size 100
bo firefox zlewa width css dla inputa.

tu znajdziesz nieco podrasowany przykład, do produkcji rzecz jasna trzeba inline js podmienić na kod zbierający inputy i dodający listenery.
http://jarek.komputeo.pl/input

Niestety zabawa z input type=file to walka z wiatrakami jeśli nie masz luksusu wyboru użytkownika pod względem przeglądarki, bo nie ma szansy na rozwiązanie cross browser - przykład hula pod nowymi silnikami, ale w starszych różnie bywa.
Nawet nowa opera się gryzie, bo nie ma tam opcji kliknięcia w dowolną część inputa, a jedynie w button.

Generalnie najrozsądniejsze pod względem usability jest pozostawienie standardowego przycisku i opatrzenie go ładnym tekstem w stylu:
"Przeglądaj foldery w celu zaimportowania pliku" :)

Temat: Podmiana przycisku przeglądaj / browse w <input...

Paweł Jędrasiewicz:

Próbowałem rozwiązać to następująco: program czyta zmienną uzależnioną od języka, która ma się pojawić na przycisku. Liczy długość stringa i mnoży x10px, które to później są dopisane do parametru width: <dlugosc_zmiennej x 10>px;

zrób ukryty element o takich samych ustawieniach fonta co Twój niby-browse-button, daj mu display: inline i width: auto, wsadź do środka ten sam tekst, który chcesz mieć w swoich buttonie. następnie pobierz wymiary ukrytego elementu, usuń go, a wymiary nadaj swojemu buttonowi. ;)