Forum PHP.pl > input - onfocus/onblur

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

SeaDog

31.03.2011, 20:26:10

Witajcie, znalazłem w internecie poniższy kod:

[XML] pobierz, plaintext 
<input type='password' name='password' value='xxxxxxxxxx' onfocus=\"if(this.value == 'xxxxxxxxxx') {this.value=''}\" onblur=\"if(this.value == '') { this.value='xxxxxxxxxx'}\" class='topinput' />
[XML] pobierz, plaintext

Chciałbym go lekko zmienić, żeby zamiast "gwiazdek", wyświetlany był zwykły napis: hasło
ale żeby podczas wpisywania hasła, wpisywany tekst był za "gwiazdkami".

W jaki sposób można to osiągnąć?

kamil4u

1.04.2011, 13:15:07

Masz:

Kod

<input type='password' name='password' value='hasło' id="test">
<script>
var el = document.getElementById('test');
el.type = 'text';
el.onfocus = function(){
if(this.value == 'hasło'){
  this.type = 'password';
  this.value = '';
}
}

el.onblur = function(){
if(this.value == ''){
  this.type = 'text';
  this.value = 'hasło';
}
}
</script>

SeaDog

1.04.2011, 17:40:22

Niestety podany skrypt nie działa.
Zaimportowałem go jako osobny plik.js, w formularzu dodałem ID do pola password i nic.
Cały napis jest za gwiazdkami a jak się kliknie w pole to gwiazdki w ogóle nie znikają.

kamil4u

1.04.2011, 17:56:27

Poczytaj o DOM. Następnie poczytaj o tym, dlaczego ten musi być załadowany, zanim będziesz na nich operował. Można to zrobić np. używając zdarzenia (on)load lub tak jak ja wstawiając kod JS, pod kodem HTML(za danym elementem).

Wszystko działa.

SeaDog

1.04.2011, 20:05:54

Jestem noga z JS ale ostatnio zaczął mi się podobać i dlatego będę musiał się go nauczyć.
Poczytałem trochę o wspomnianym przez Ciebie DOM. Na chwilę obecną jest to dla mnie czarna magia.
Umieściłem kod za polem input i faktycznie działa.

Dziękuję za pomoc.

kamil4u

1.04.2011, 21:01:20

Taka metoda nie jest najlepsza... - dałem to tylko jako przykład. Najlepiej zastosować zdarzenie onload:

Kod

onload = function(){
//tu Twój kod, który możesz wstawić wszędzie - oczywiście kod odpowiedzialny za działaniach na elementach
}

Jak poczytasz o DOM więcej to dowiesz się, że zdarzenia można też dodawać inaczej.

SeaDog

9.04.2011, 21:59:45

Muszę niestety odnowić temat

Dopiero teraz spostrzegłem, że skrypt nie działa w IE 6-8
W tej "przeglądarce" gwiazdki nie znikają. W innych przeglądarkach wszystko jest ok.

W IE wyświetla się błąd "type".

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.