[js] focus() + tekst domyślny w input.text Opcje

[mike]

Podobnie jak w temacie.
Potrzebuje kodu w js który daje następujący efekt:
1. jeżeli kursora nie ma w polu text w formularzu to widnieje tam napis login;
2. jeżeli postawię kursor to tekst znika.
Tylko prosze, nie znam js i nie odsyłajcie mnie do pojedynczych funkcji.

[Liko]

[xml:1:1d4ddccf0c]
<input type="text" name="login" value="twój login" onblur="if(this.value=='')this.value='twój login';" onfocus="if(this.value=='twój login')this.value='';">
[/xml:1:1d4ddccf0c]

[mike]

Mam jeszcz dwie prośby:
1. czy da się żeby tekst był po załadowaniu strony, bo na razie działa dopiero bo tym jak raz postawią kursor ( i potem już ok);
2. czy w polu typu input.password można wyświetlić taki tekst ale żeby to nie były gwiazdki, gwiazdki powinny pojawiać się przy pisaniu. Czy to w ogóle jest wykonalne;
3. i czy to może być funkcja , to bym ją sobie do innego pliku wsadził. Bo będę z tego kożystał wiele razy.
Dzięki z góry.

[Liko]

Ad.1 U mnie wyświetla ten tekst odrazu po załadowaniu więc nie wiem co jest u ciebie.
Ad.2 Nie wiem
Ad.3 Nie wiem

[e-Gandalf]

mike: mozna, ale to jest powazny blad i dziura w browserach... mozesz mianowicie zmienic typ pola.

Czyli stworzyc funkcje ktora onfocus zmieni typ pola z password na text, nastepnie zmieni zawartosc a na blur przywroci ustawienia.

A czy to moze byc funkcja? Pewnie...

Kod

<script type="text/javascript">

function setInfo(o) {

  if (!o.value)

    o.value="wpisz login";

}



function removeInfo (o) {

  if (o.value=="wpisz login")

    o.value="";

}

</script>

Dla passworda musisz jeszcze zmieniac typ czyli dopisujesz do bloku warunkowego o.type="password", o.type="text".

[evo]

mike: mozna, ale to jest powazny blad i dziura w browserach... mozesz mianowicie zmienic typ pola.

Czyli stworzyc funkcje ktora onfocus zmieni typ pola z password na text, nastepnie zmieni zawartosc a na blur przywroci ustawienia.

wlasciwosc type elementu input w IE jest readonly..


...w gecko oczywiscie nie



Pozdrawiam
evo

[e-Gandalf]

argh, nie wiedzialem.

W takim razie musisz zrobic dwa inputy i zaglowac ich visibility albo display.

[Vir]

funkcja...

Funkcję taką można zapisać "prościej" i jest to jedna funkcja:
[xml:1:98534cf8ce]function insert()

{
var inp = document.test.login;
(inp.value == "Twój login") ? inp.value = "" : (inp.value == "") ? inp.value="Twój login" : "";
}[/xml:1:98534cf8ce]
w ramach Body:
[xml:1:98534cf8ce]<form name="test">
<input type="text" name="login" value="Twój login" onblur="insert()" onfocus="insert()">
</form>[/xml:1:98534cf8ce]

Fajnym rozwiązaniem jest także wstawienie jako tła pola input obrazka ze stosownym napisem (podaj login, podaj hasło). W tym celu tworzysz odpowiednich rozmiarów obrazek, w kodzie zapisujesz to tak:
[xml:1:98534cf8ce]<input type="password" name="pass" style="background-image: url('pass.gif')">[/xml:1:98534cf8ce]
Kontynuując te rozważania można "dorzucić" obsługę zdarzeń onblur oraz onfocus.
Wyglądałoby to tak:
[xml:1:98534cf8ce]<style type="text/css">

INPUT.pass
{
background-image: url('pass.gif')
}

INPUT.clear
{
background-image: url('clear.gif')
}

</style>[/xml:1:98534cf8ce]
i
[xml:1:98534cf8ce]<input type="password" name="pass" onblur="this.className='pass'" onfocus="this.className='clear'" style="background-image: url('pass.gif')">[/xml:1:98534cf8ce]
W powyższym przykładzie mamy jeden plik - pass.gif z napisem "Podaj hasło". Napis (a właściwie tło) widnieje do momentu ustawienia kursora w polu, wówczas to tło ginie (podstawiony jest brakujący obrazek clear.gif - pojawi się białe tło). Przy zdarzeniu onblur tło z napisem powraca...

[e-Gandalf]

No tylko, ze jak ktos juz wpisze znaki i zabierze kursor to mu sie bedzie wyswietlal napis w tle.

i proponowalbym jendak uzywac poprawnej notacji jezyka JS:

document.forms['formularz'].elements['pole'] - w celu uzyskania zgodnosci z innymi przegladarkami niz IE.

[Vir]

No tylko, ze jak ktos juz wpisze znaki i zabierze kursor to mu sie bedzie wyswietlal napis w tle.

Racja Późno pisałem i nawet o tym nie pomyślałem, ale skrypt można rozszerzyć o nie wyświetlanie tła jeżeli wpisana jest jakaś wartość.

i proponowalbym jendak uzywac poprawnej notacji jezyka JS:
document.forms['formularz'].elements['pole'] - w celu uzyskania zgodnosci z innymi przegladarkami niz IE.

Jeżeli tak się bawimy to proponowałbym zastosowanie się do poniższego przykładu (przykład zgodny z XHTML 1.0 Transitional):
[xml:1:ee00276a6f]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title> </title>
<script type="text/javascript">
<!-- <![CDATA[
function insert()

{
var inp = document.getElementById('test').login;
(inp.value == "Twój login") ? inp.value = "" : (inp.value == "") ? inp.value="Twój login" : "";
}
// ]]> -->
</script>
</head>
<body>
<form id="test" action="">
<input type="text" name="login" value="Twój login" onblur="insert()" onfocus="insert()" />
</form>
</body>
</html>[/xml:1:ee00276a6f]
Poprzedni przykład tak i ten działają na IE 6.0, Opera 7.23, Mozilla 1.6.