ugrás a tartalomhoz

Javascriptben írt placeholder probléma

juhostt · 2013. Már. 12. (K), 21.00
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:
  1.  function pasf(ph, obj){  
  2.     if(obj.value == ph)  
  3.       obj.value = "";  
  4.   if ( obj.value == "" && obj.value != "Jelszó")  
  5.   {  
  6.      
  7. var newO=document.createElement('input');  
  8. newO.setAttribute('type','password');  
  9. newO.setAttribute('size','19');  
  10. newO.setAttribute('name','jelszo');  
  11. newO.setAttribute('id','pas');  
  12. newO.setAttribute('class','pass');  
  13. newO.setAttribute('onblur','pasb('Jelszó',this)');  
  14. newO.setAttribute('onfocus','pasf('Jelszó',this)');  
  15. obj.parentNode.replaceChild(newO,obj);  
  16. newO.focus();  
  17.   }  
  18.   }  
Az onblur esetére írt script:
  1. function pasb(ph, obj){  
  2.        if(obj.value == "") {  
  3.    obj.value = ph;  
  4.        }  
  5.   
  6. }  
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!
‹ CSS kattintásra úgymaradó szöveg Harmonizáló színek ›
 ■
1

Trükk

Hidvégi Gábor · 2013. Már. 12. (K), 21.25
Miért nem azt csinálod, hogy van egy jelszómező, felette pont egy <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.
2

Már megint a probléma

juhostt · 2013. Már. 12. (K), 22.09
Már megint a probléma megkerülése a megoldás helyett?! Ennyi erővel jquery-t is használnék, de azzal még mindig ott lesz a probléma.
5

Probléma

Hidvégi Gábor · 2013. Már. 13. (Sze), 08.52
Mi a probléma, mert akkor nem igazán értem. Ha a jelszómezőbe nincs semmi beírva, azt szeretnéd, hogy legyen beleírva: "Jelszó". Amit írtam, egy megoldás erre. Poetro is megerősített, hogy a típus változtatása nem fog menni. Miben segítene a jquery?

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.
7

A probléma a password típusú

juhostt · 2013. Már. 13. (Sze), 09.33
A probléma a password típusú mezőnél jön elő. (sima text mezőnél remekül megy minden böngészőben):
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...
9

Rakd egy <div>-be, és

Hidvégi Gábor · 2013. Már. 13. (Sze), 09.56
Rakd egy <div>-be, és virtuálisan máris két háttere van.
3

input mező típusát nem igazán

Poetro · 2013. Már. 12. (K), 22.16
input mező 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 a text mezőt, ahhoz előbb létre kell hozni egy új text mezőt, és el kell tűntetni a password mezőt.
6

Csak az explorer nem szereti

juhostt · 2013. Már. 13. (Sze), 09.32
Csak az explorer nem szereti változtatni, a többi böngésző megcsinálta, de azt szeretném, ha ie-ben is működne.
8

IE-ben nem fog. Más megoldást

Hidvégi Gábor · 2013. Már. 13. (Sze), 09.54
IE-ben nem fog. Más megoldást kell találni.
10

Az input mező teljes

juhostt · 2013. Már. 13. (Sze), 11.14
Az input mező teljes cserélése lenne a megoldás, de a logikám egy útvesztőbe jutott. Nem bírom megfogalmazni a logikai feltételt, hogy mikor melyik függvényben milyen esetben legyen text vagy passwd típusú az input mező :(
11

Miért?

Hidvégi Gábor · 2013. Már. 13. (Sze), 11.39
Csak arra kérlek, magyarázd el, miért ez az egy megoldás lehetséges?
13

Az input mező teljes

Poetro · 2013. Már. 13. (Sze), 11.59
Az input mező teljes cserélése lenne a megoldás, de a logikám egy útvesztőbe jutott.

Mi a logikai útvesztő? Megnézed, milyen típusú mezőről van szó, és annak mi az értéke. És csókolom.
14

Kiút az útvesztőből

Endyl · 2013. Már. 13. (Sze), 12.06
Ha mindenképp cserélgetni akarod az inputokat (de minek??), akkor:

Alapesetben legyen egy ilyen meződ:
  1. <input type="password" placeholder="Jelszó"/>  
Amikor betöltött az oldal, ellenőrzöd, hogy a böngésző támogatja-e a placeholder attribútumot.

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.
4

Legközelebb kérlek állíts be

bamegakapa · 2013. Már. 12. (K), 22.34
Legközelebb kérlek állíts be valami olvasható behúzást a kódodon.
12

Sokkal elegánsabb és kevésbé

tgr · 2013. Már. 13. (Sze), 11.50
Sokkal elegánsabb és kevésbé problémás megoldás a mező fölé pozicionálni egy labelt, és abba írni a placeholder szöveget.
15

Ezt a módszert is

juhostt · 2013. Már. 13. (Sze), 16.48
Ezt a módszert is kipróbáltam. Természetesen az label a input mezőben volt megjelenítve (mivel a design nem engedi hogy az input mezőn kívül tegyem, de nem ez a lényeg)
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...
17

Nem értem, mit kell

Hidvégi Gábor · 2013. Már. 13. (Sze), 19.13
Nem értem, mit kell bonyolítani. Tíz perc alatt hoztam össze a következőt:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4.   <title>Cím</title>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <meta http-equiv="content-language" content="hu">  
  7. <style type="text/css">  
  8. #tarto {  
  9.   position: relative;  
  10. }  
  11. #helytarto {  
  12.   position: absolute;  
  13.   left: 3px;  
  14.   top: 3px;  
  15. }  
  16. #tarto:hover #helytarto {  
  17.   color: #ffcc00;  
  18. }  
  19. </style>  
  20. </head>  
  21.   
  22. <body>  
  23. <div id="tarto">  
  24.   <input type="text" id="beviteli">  
  25.   <div id="helytarto">helytartó</div>  
  26. </div>  
  27. <script type="text/javascript">  
  28. var beviteli = document.getElementById('beviteli');  
  29. var helytarto = document.getElementById('helytarto');  
  30. function beviteli_focus() {  
  31.   if (this.value === '') {  
  32.     helytarto.style.visibility = 'hidden';  
  33.   }  
  34. }  
  35. function beviteli_blur() {  
  36.   if (this.value === '') {  
  37.     helytarto.style.visibility = 'visible';  
  38.   }  
  39. }  
  40. beviteli.onfocus = beviteli_focus;  
  41. beviteli.onblur = beviteli_blur;  
  42. </script>  
  43. </body>  
  44. </html>  
20

Ez valóban egyszerűbb, így

juhostt · 2013. Már. 14. (Cs), 10.56
Ez valóban egyszerűbb, de mint a labelnél itt is az a helyzet, hogy a szövegre nem lehet kattintani. Ezért ha az input mező szövege majdnem kitölti az input mezőt, akkor az user nem biztos hogy elsőre rájön, hogy ne a szövegre hanem mellé kattintson.


Update: Kiegészítettem picit, így már jó lesz:

function focus_1(){
    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.
21

Mi a különbség a == és az ===

Poetro · 2013. Már. 14. (Cs), 11.19
Mi a különbség a == és az === között?

Az == típuskonverziót végez, ezért kerülendő.
  1. >>> 0 == "0"  
  2. true  
  3. >>> "0" == 0  
  4. true  
  5. >>> 0 == ""  
  6. true  
  7. >>> " " == 0  
  8. true  
  9. >>> 0 == false  
  10. true  
  11. >>> "0" == false  
  12. true  
  13. >>> "1" == true  
  14. true  
  15. >>> "01" == true  
  16. true  
  17. >>> null == undefined  
  18. true  
  19. >>> "017" == 17  
  20. true  
  21. >>> ",,," == new Array(4)  
  22. true  
  23. >>> false == [0]  
  24. true  
  25. >>> 0 == [null]  
  26. true  
24

Köszi a részletes

juhostt · 2013. Már. 14. (Cs), 11.48
Köszi a részletes leírást.

Akkor ne csak js-ben hanem más nyelvekben se használjam az ==?
25

Nyugodtan használd a ==-t,

Hidvégi Gábor · 2013. Már. 14. (Cs), 11.55
Nyugodtan használd a ==-t, csak mindig gondolj bele, hogy számít-e a típus, mert ha igen, akkor === kell. Most néztem meg egy 240k-s scriptet, amin épp dolgozom, 287-szer szerepel benne a két, 53-szor a három egyenlőségjel, az előbbinek ráadásul gyorsabb is a feldolgozása.
27

The type conversion does not

Greg · 2013. Már. 14. (Cs), 12.23
The type conversion does not take place when the comparison is === or !== as this involves comparing the type as well as the value.

A === nem csinal tipuskonverziot, ugyhogy elmeletileg nem kellene hogy lassabb legyen.
28

Értem

Hidvégi Gábor · 2013. Már. 14. (Cs), 12.31
Na, ez lehetséges, nem tudtam, hogy az == csinál.
29

Miért, szerinted a korábbi

Poetro · 2013. Már. 14. (Cs), 12.39
Miért, szerinted a korábbi hozzászólásom mit demonstrál?
30

Azt, hogy néha figyelmetlenül

Hidvégi Gábor · 2013. Már. 14. (Cs), 13.41
Azt, hogy néha figyelmetlenül olvasok : )
22

Ha a #tarto:hover #helytarto

Hidvégi Gábor · 2013. Már. 14. (Cs), 11.21
Ha a #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.
0 == '' (true)
'' == undefined (true)
DE
null === false (false)
0 === '' (false)
23

Ha a #tarto:hover #helytarto

juhostt · 2013. Már. 14. (Cs), 11.46
Ha a #tarto:hover #helytarto { kezdetű sorban lévő definíciót megfelelően módosítod,


És valóban.... Már fáj hogy mennyire nem tudom egyszerűre venni a dolgot.
26

Ahogy Gábor is írja, okosabb

tgr · 2013. Már. 14. (Cs), 12.23
Ahogy Gábor is írja, okosabb böngészőkön CSS-ből is lehet ezt kezelni :hover-rel (még okosabbakon meg van pointer-events: none), de ha nagyon kompatibilis akarsz lenni, akkor is sokkal egyszerűbb a click eseményt kezelni (ha rákattint a user a labelre, elrejted és az inputra teszed a fókuszt), mint az egérmozgásos eseményeket, amik általában elég problémásak.
16

plugin

Poetro · 2013. Már. 13. (Sze), 18.12
Pár éve csináltam erre egy jQuery plugint, amit azért nem túl bonyolult átírni jQuery nélkülire.
18

Ugyanúgy replaceChild kellene

inf · 2013. Már. 13. (Sze), 19.51
Ugyanúgy replaceChild kellene a blur-hoz, mint a focus-hoz, hogy visszaálljon a text mezős állapot... Ez egy szimpla toggle egyébként...
19

Ennek utána nézek köszi! A

juhostt · 2013. Már. 14. (Cs), 10.29
Ennek utána nézek köszi! A kérdés, hogy az IE mennyire fogja szeretni v nem szeretni.