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:
 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();
  }
  }
Az onblur esetére írt script:
 function pasb(ph, obj){
        if(obj.value == "") {
    obj.value = ph;
        }
 
 }
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!
 
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:
<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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Cím</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="content-language" content="hu">
<style type="text/css">
#tarto {
  position: relative;
}
#helytarto {
  position: absolute;
  left: 3px;
  top: 3px;
}
#tarto:hover #helytarto {
  color: #ffcc00;
}
</style>
</head>

<body>
<div id="tarto">
  <input type="text" id="beviteli">
  <div id="helytarto">helytartó</div>
</div>
<script type="text/javascript">
var beviteli = document.getElementById('beviteli');
var helytarto = document.getElementById('helytarto');
function beviteli_focus() {
  if (this.value === '') {
    helytarto.style.visibility = 'hidden';
  }
}
function beviteli_blur() {
  if (this.value === '') {
    helytarto.style.visibility = 'visible';
  }
}
beviteli.onfocus = beviteli_focus;
beviteli.onblur = beviteli_blur;
</script>
</body>
</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ő.
>>> 0 == "0"
true
>>> "0" == 0
true
>>> 0 == ""
true
>>> " " == 0
true
>>> 0 == false
true
>>> "0" == false
true
>>> "1" == true
true
>>> "01" == true
true
>>> null == undefined
true
>>> "017" == 17
true
>>> ",,," == new Array(4)
true
>>> false == [0]
true
>>> 0 == [null]
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.