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.
Pełna wersja: [js] focus() + tekst domyślny w input.text
[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]
<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]
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.
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.
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
Ad.2 Nie wiem
Ad.3 Nie wiem
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...
Dla passworda musisz jeszcze zmieniac typ czyli dopisujesz do bloku warunkowego o.type="password", o.type="text".
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>
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".
Cytat
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.
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
argh, nie wiedzialem.
W takim razie musisz zrobic dwa inputy i zaglowac ich visibility albo display.
W takim razie musisz zrobic dwa inputy i zaglowac ich visibility albo display.
Cytat
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...
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.
i proponowalbym jendak uzywac poprawnej notacji jezyka JS:
document.forms['formularz'].elements['pole'] - w celu uzyskania zgodnosci z innymi przegladarkami niz IE.
Cytat
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ść.
Cytat
i proponowalbym jendak uzywac poprawnej notacji jezyka JS:
document.forms['formularz'].elements['pole'] - w celu uzyskania zgodnosci z innymi przegladarkami niz IE.
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.
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.