Javascriptben írt placeholder probléma
Sziasztok!
Megint egy kis segítségre szorulok.
Adott a következő js script, amely placeholder funkciót lát el egy input mezőben.
A script előző verziója ie-ben nem működött, így jött a módosítás, ami nem teljesen megy.
Leírom a függvényt és a sikertelen próbálkozásaim.
Az onfocus esetére írt script:Az onblur esetére írt script:A script működése:
1. az oldal betöltésekor:
Kiírja, hogy "Jelszó".
2. Belekattintok az input mezőbe:
A "Jelszó" kitörlődik, az input mező típusa password.
3. Kikattintok az input mezőből:
A beírt szó megmarad és marad password típusú mező.
4. A fekete leves:
Ha kitörlöm a beírt szót, a bejön a "Jelszó" szó, de nem tudom visszaállítani erre az eseményre hogy text típusú legyen.
Voltak próbálkozások, de volt amikor nem maradt meg a beírt szöveg. Volt amikor nem lett password típusú az input mező. Volt amikor a 2. belekattintásra tünt el a beírt szó
Szerintem a pasb függvényben kell írni, mivel az input mező "elhagyása" ennek az eredményeként fut le. Én is ebben próbáltam alkotni, de mint írtam eddig sikertelenül. Az lenne a lényeg, hogy a jelenlegi scriptet kellene kiegészíteni, hogy amikor az input mező üres és kilépek belőle, és kiírja a "Jelszó" szöveget, akkor ne password hanem text típusú legyen az input mező.
A jquery-s placeholdert nem akarok használni, ha azt akartam volna, akkor nem kérdeztem volna itt sem.
Előre is köszönöm a segítéget!
■ Megint egy kis segítségre szorulok.
Adott a következő js script, amely placeholder funkciót lát el egy input mezőben.
A script előző verziója ie-ben nem működött, így jött a módosítás, ami nem teljesen megy.
Leírom a függvényt és a sikertelen próbálkozásaim.
Az onfocus esetére írt script:
function pasf(ph, obj){
if(obj.value == ph)
obj.value = "";
if ( obj.value == "" && obj.value != "Jelszó")
{
var newO=document.createElement('input');
newO.setAttribute('type','password');
newO.setAttribute('size','19');
newO.setAttribute('name','jelszo');
newO.setAttribute('id','pas');
newO.setAttribute('class','pass');
newO.setAttribute('onblur','pasb('Jelszó',this)');
newO.setAttribute('onfocus','pasf('Jelszó',this)');
obj.parentNode.replaceChild(newO,obj);
newO.focus();
}
}
function pasb(ph, obj){
if(obj.value == "") {
obj.value = ph;
}
}1. az oldal betöltésekor:
Kiírja, hogy "Jelszó".
2. Belekattintok az input mezőbe:
A "Jelszó" kitörlődik, az input mező típusa password.
3. Kikattintok az input mezőből:
A beírt szó megmarad és marad password típusú mező.
4. A fekete leves:
Ha kitörlöm a beírt szót, a bejön a "Jelszó" szó, de nem tudom visszaállítani erre az eseményre hogy text típusú legyen.
Voltak próbálkozások, de volt amikor nem maradt meg a beírt szöveg. Volt amikor nem lett password típusú az input mező. Volt amikor a 2. belekattintásra tünt el a beírt szó
Szerintem a pasb függvényben kell írni, mivel az input mező "elhagyása" ennek az eredményeként fut le. Én is ebben próbáltam alkotni, de mint írtam eddig sikertelenül. Az lenne a lényeg, hogy a jelenlegi scriptet kellene kiegészíteni, hogy amikor az input mező üres és kilépek belőle, és kiírja a "Jelszó" szöveget, akkor ne password hanem text típusú legyen az input mező.
A jquery-s placeholdert nem akarok használni, ha azt akartam volna, akkor nem kérdeztem volna itt sem.
Előre is köszönöm a segítéget!
Trükk
<div>"jelszó" felirattal, ha az utóbbira kattintanak, eltűnteted, és beteszed a fókuszt a jelszómezőbe? A fenti<div>-et a dokumentum onload eseményében jeleníteném meg, alapból nem látszódna, így script nélkül is működne. Az IE nem szereti, ha az<input>típusát váltogatják.Már megint a probléma
Probléma
Sőt, még egyszerűbben is megcsinálhatod: készítesz egy "Jelszó" feliratot png-ben, beteszed a jelszómező alapértelmezett hátterének, és a tartalmától függően ki-be kapcsolgatod a láthatóságát.
A probléma a password típusú
Alap eset: megjelenik az input mező text típusú, megjelenik benne a Jelszó felirat.
Belakattintok: a Jelszó felirat eltűnik, átvált password típusba az input mező.
Kikattintás esetén:
-Ha üres az input mező, akkor megjelenik a jelszó feliarat, de a mező még mindig password típusú. Ezt kellene megoldani, hogyha password típusú a mező és a value="" akkor váltson text típusú mezőbe és írja ki, hogy Jelszó.
-Ha nem üres a jelszó, hanem benne van a jelszó, akkor is működik a script rendesen, megmarad benne a beírt szó és marad password típusú.
Már van háttere az input mezőknek, így a hátteres móka is ki van zárva. Meg lehet csinálni így is, csak valahol valamit én nem látok át a rendszerben...
Rakd egy <div>-be, és
<div>-be, és virtuálisan máris két háttere van.input mező típusát nem igazán
inputmező típusát nem igazán lehet megváltoztatni, legfeljebb létrehozni egy új mezőt, amivel lecseréled az előzőt. Azaz amikor te vissza akarod állítani atextmezőt, ahhoz előbb létre kell hozni egy újtextmezőt, és el kell tűntetni apasswordmezőt.Csak az explorer nem szereti
IE-ben nem fog. Más megoldást
Az input mező teljes
Miért?
Az input mező teljes
Mi a logikai útvesztő? Megnézed, milyen típusú mezőről van szó, és annak mi az értéke. És csókolom.
Kiút az útvesztőből
Alapesetben legyen egy ilyen meződ:
Ha igen, akkor nincs semmi dolgod.
Ha nem, akkor elrejted a jelszó mezőt, csinálsz egy új szöveges mezőt 'Jelszó' szöveggel, és beszúrod a jelszó mező elé. Feliratkozol a jelszó és a szövegmező focus eseményére (ugyanazzal a függvénnyel), valamint a jelszó mező blur eseményére (egy másik függvénnyel). Ha fókuszt kap valamelyik, a szövegmezőt elrejted, megjeleníted a jelszó mezőt és ráteszed a fókuszt (ha még nincs rajta). Ha a fókusz elhagyja a jelszó mezőt, és üres, akkor azt elrejted és megjeleníted a szövegmezőt.
Így JS nélkül is lesz egy normálisan működő űrlapod. A szöveges input mező helyett persze használhatsz tetszőleges elemet, csak figyelj arra, hogy ha nem fókuszálható az adott elem, akkor annak a click eseményére figyelj, ne a focusra.
Persze mindig törölheted és újra létrehozhatod is az input mezőket (ha jól értem, hogy valamiért ezt szeretnéd), de teljesen felesleges.
Legközelebb kérlek állíts be
Sokkal elegánsabb és kevésbé
Ezt a módszert is
A lényeg, hogy a labelra nem lehet kattintani. Ezt részben küszöböltem egy onmouseover-el. Ha fölé viszem az egeret, eltűnik. Viszont ha belekattintok, újra előjön a label.
Az onfocus be van állítva, de az onmouseover-el nem nagyon férnek össze egyidőben. Mit lehetne tenni ez ellen?
Összegezve a dolgot:
Betölt az oldal.
Ráviszem az egeret az input mezőre, akkor eltűnik a label.
Rákattintok, akkor sem látszik a label.
Elviszem az egeret az input mezőtől és látszik a label, pedig be van állítva az onfocus esetére, is, hogy tünjön el a label.
Update: megoldottam egy onkeydown-al. Így amikor elkezd gépelni a felhasználó, akkor eltünik a label. Így már elfogadható, bár ez olyan mint amikor az út rossz és ahelyett hogy megcsinálnák kitesznek egy 30-as táblát...
Nem értem, mit kell
Ez valóban egyszerűbb, így
Update: Kiegészítettem picit, így már jó lesz:
helytarto.style.visibility = 'hidden';
}
function blur_1(){
if (this.value === '') {
helytarto.style.visibility = 'visible';
}
}
Ezt beteszem onmouseover és onmouseout-ra így amikor ráviszem az egeret a szöveg eltünik, így az egész input mezőre kattintani lehet.
Egy másik kérdés:
Mi a különbség a == és az === között?
Régről úgy emlékszem, hogy az == az egyenlő a === pedig azonosat jelent, de nem vagyok képbe nagyon.
Mi a különbség a == és az ===
Az
==típuskonverziót végez, ezért kerülendő.Köszi a részletes
Akkor ne csak js-ben hanem más nyelvekben se használjam az ==?
Nyugodtan használd a ==-t,
The type conversion does not
A === nem csinal tipuskonverziot, ugyhogy elmeletileg nem kellene hogy lassabb legyen.
Értem
Miért, szerinted a korábbi
Azt, hogy néha figyelmetlenül
Ha a #tarto:hover #helytarto
#tarto:hover #helytarto {kezdetű sorban lévő definíciót megfelelően módosítod, nem kell az onmouseover-rel vacakolni, direkt emiatt raktam bele, bár a hatása csak annyi jelenleg, hogy átszínezi a szöveget.A === a szigorú ellenőrzés, ami a típust is figyelembe veszi.
'' == undefined (true)
DE
null === false (false)
0 === '' (false)
Ha a #tarto:hover #helytarto
És valóban.... Már fáj hogy mennyire nem tudom egyszerűre venni a dolgot.
Ahogy Gábor is írja, okosabb
plugin
Ugyanúgy replaceChild kellene
Ennek utána nézek köszi! A