Autor Zpráva
Mufna
Profil
#1 · Zasláno: 12. 7. 2012, 14:37:33 · Upravil/a: Mufna o 6 minut později
Odpovědět Citovat
Zdravím Vás. Chtěl bych vylepšit můj stávající JS kód, který řeší události onfocus a onblur v inputu formuláře pro vyhledávání zadaného výrazu. Vylepšení bych si představoval tak, že v HTML nebude žádný JS a vše bude v externím JS souboru s tím, že k inputu formuláře se bude přistupovat přes getElementById()

Nyní mám HTML: 
<input name="q" id="search_text" type="text" onfocus="onF(this, \'Hledaný výraz\');" onblur="onB(this, \'Hledaný výraz\');" value="Hledaný výraz" />
<input name="q" id="search_text" type="text" onfocus="onF(this, \'Hledaný výraz\');" onblur="onB(this, \'Hledaný výraz\');" value="Hledaný výraz" />

a v externím JS mám zatím toto: 
1function onF(a, b) {
2    if(a.value == b){
3       a.value = '';
4    } else if (a.value == '') {
5       a.value = b;
6    } else {
7       a.value = a.value;
8    }
9}
10 
11function onB(a, b) {
12    if(a.value == '') {
13       a.value = b;
14    } else {
15       a.value = a.value;
16    }
17}
function onF(a, b) {
    if(a.value == b){
       a.value = '';
    } else if (a.value == '') {
       a.value = b;
    } else {
       a.value = a.value;
    }
}
 
function onB(a, b) {
    if(a.value == '') {
       a.value = b;
    } else {
       a.value = a.value;
    }
}


Pomůže mi někdo ?
Keeehi
Profil
#2 · Zasláno: 12. 7. 2012, 14:53:22
Odpovědět Citovat 
1<input name="q" id="search_text" type="text" onfocus="onF(this);" onblur="onB(this);" value="Hledaný výraz" />
2<script type="text/javascript">
3<!--  
4function onF(a) {
5    if(a.value == a.defaultValue) {
6      a.value = '';
7    }
8}
9 
10function onB(a) {
11    if(a.value == '') {
12       a.value = a.defaultValue;
13    }
14}
15//-->
16</script>
<input name="q" id="search_text" type="text" onfocus="onF(this);" onblur="onB(this);" value="Hledaný výraz" />
<script type="text/javascript">
<!--  
function onF(a) {
    if(a.value == a.defaultValue) {
      a.value = '';
    }
}
 
function onB(a) {
    if(a.value == '') {
       a.value = a.defaultValue;
    }
}
//-->
</script>
Mufna
Profil
#3 · Zasláno: 12. 7. 2012, 15:04:08
Odpovědět Citovat
Keeehi:
díky, je to jednodušší a funguje to.

Ještě bych měl jeden dotaz. Chtěl bych to udělat nikoliv pro atribut value, ale pro atribut title. Takže pro: 
<input name="q" id="search_text" type="text" onfocus="onF(this);" onblur="onB(this);" title="Hledaný výraz" />
<input name="q" id="search_text" type="text" onfocus="onF(this);" onblur="onB(this);" title="Hledaný výraz" />

Jde to nějak upravit ?
Keeehi
Profil
#4 · Zasláno: 12. 7. 2012, 15:10:26
Odpovědět Citovat
Mufna:
defaultValue nahraď za title, ale je to podle mě blbost. Jestliže neuvedeš value, nebudeš mít v inputu na začátku nic. Pokud value uvedeš, proč pak tahat hodnotu z title, když existuje defaultValue?
Mufna
Profil
#5 · Zasláno: 12. 7. 2012, 15:58:06 · Upravil/a: Mufna o 2 minuty později
Odpovědět Citovat
Keeehi:
Já chtěl použít pouze title, ne value, a nějak zařídit aby se i po prvním načtení stránky ta hodnota v title objevila ve formuláři. Ale zatím jsem nepřišel na to jak to udělat. Jinak samozřejmě pokud mám uvedenu počáteční hodnotu ve value, tak je pak blbost ji tahat z title, v tom s tebou naprosto souhlasím.

Tak jak tak jsem ale odstranil veškerý JS z HTML kódu a mám to teď takto:

HTML: 
<input name="q" id="search_text" type="text" value="Hledaný výraz" />
<input name="q" id="search_text" type="text" value="Hledaný výraz" />

JS (v samostatném souboru): 
1window.onload = function() {
2 
3    var onfocus = function() { if (this.value == this.defaultValue) this.value = ""; };
4    var onblur = function() { if (this.value == "") this.value = this.defaultValue; };
5    var init = function(ele) {
6        ele.onfocus = onfocus;
7        ele.onblur = onblur;
8    }
9   
10    init(document.getElementById("search_text"));
11 
12};
window.onload = function() {
 
    var onfocus = function() { if (this.value == this.defaultValue) this.value = ""; };
    var onblur = function() { if (this.value == "") this.value = this.defaultValue; };
    var init = function(ele) {
        ele.onfocus = onfocus;
        ele.onblur = onblur;
    }
   
    init(document.getElementById("search_text"));
 
};

zatím to všude funguje :-)


Ještě bych do toho rád nějak zabudoval to, aby pokud je v políčku formuláře defaultní hodnota (tedy slova "Hledaný výraz"), tak aby se nic neodesílalo. Odesílací políčko mám takto: 

<input type="image" src="lupa.jpg'" class="imagesub" alt="Hledej" title="Hledej" />
<input type="image" src="lupa.jpg'" class="imagesub" alt="Hledej" title="Hledej" />

Poradí ještě někdo s tímto ?
Trejpa
Profil
#6 · Zasláno: 12. 7. 2012, 16:42:36
Odpovědět Citovat
Mufna:
Takhle bych vyřešil to předchozí. Na rozdíl od Keeehi chápu tahání hodnoty z title, neboť bez skriptu by uživatel musel vymazávat výchozí text. Pochopitelně to můžeš uzavřít do externích funkcí. K načtení úvodní hodnoty po načtení stránky slouží skript, který si můžeš do svého kódu vložit na konec funkce onload. 

1<input type=text value="" title="Hledaný výraz"
2 id=search_text name=hledani
3 onfocus="if(this.value==this.title){this.value=''}"
4 onblur="if(this.value==''){this.value=this.title}">
5<script>document.getElementById('search_text').value=document.getElementById('search_text').title;</script>
<input type=text value="" title="Hledaný výraz"
 id=search_text name=hledani
 onfocus="if(this.value==this.title){this.value=''}"
 onblur="if(this.value==''){this.value=this.title}">
<script>document.getElementById('search_text').value=document.getElementById('search_text').title;</script>


Zabránění odeslání se váže na funkci volanou pomocí onsubmit formuláře, která vrací true v případě vyplnění políčka a false u políčka prázdného (nebo s defaultní hodnotou). Pochopitelně je vhodné nezadanou hodnotu ošetřit i na straně serveru.
Keeehi
Profil
#7 · Zasláno: 12. 7. 2012, 17:06:11
Odpovědět Citovat
Když do initu přidáš ještě 
ele.value = ele.title;
ele.value = ele.title;
budeš mít i předvyplněnou hodnotu.
Mufna
Profil
#8 · Zasláno: 12. 7. 2012, 17:21:28 · Upravil/a: Mufna
Odpovědět Citovat
Keeehi:
jj, je to tak, dík :-)


a teď bych ještě potřeboval to ošetřit jak jsem psal někde výše, tzn. aby se zdeaktivovalo odesílání, pokud v políčku je pouze ta přednastavená hodnota, tedy u mě "Hledaný výraz". A pak by to bylo pro moje účely dokonalý.
Mufna
Profil
#9 · Zasláno: 12. 7. 2012, 18:37:44
Odpovědět Citovat
Tak jsem zatím rozšířil svůj JS, ale v jednom místě nevím, jak tam dát podmínku či výraz, který zdeaktivuje odesílání. Poradí mi ještě někdo ? 
1window.onload = function() {
2 
3    var onF = function() { if (this.value == this.title) this.value = ""; };
4    var onB = function() { if (this.value == "") this.value = this.title; };
5    var onS = function() { if (this.value == this.title || this.value == "") /* tady musí něco být, ale nevím co */ ; };
6    var init = function(ele) {
7        ele.value = ele.title;
8        ele.onfocus = onF;
9        ele.onblur = onB;
10    }
11    
12    var sendIf = function(ele) {
13        ele.onsubmit = onS;
14    }
15   
16    init(document.getElementById("search_text"));
17    sendIf(document.getElementById("searchform"));
18 
19};
window.onload = function() {
 
    var onF = function() { if (this.value == this.title) this.value = ""; };
    var onB = function() { if (this.value == "") this.value = this.title; };
    var onS = function() { if (this.value == this.title || this.value == "") /* tady musí něco být, ale nevím co */ ; };
    var init = function(ele) {
        ele.value = ele.title;
        ele.onfocus = onF;
        ele.onblur = onB;
    }
    
    var sendIf = function(ele) {
        ele.onsubmit = onS;
    }
   
    init(document.getElementById("search_text"));
    sendIf(document.getElementById("searchform"));
 
};
Keeehi
Profil
#10 · Zasláno: 12. 7. 2012, 19:11:39
Odpovědět Citovat 
/* tady musí něco být, ale nevím co */
/* tady musí něco být, ale nevím co */
mělo by tam být return false;

Problém je, že ti to fungovat nebude. Onsubmit je navázán na formulář, takže this v té podmínce ukazuje na form a ne input. Pokud by jsi tomu inputu zachoval name="q", dostal by jsi se tam kam potřebuješ poměrně snadno. 
this.q.value
this.q.value
Mufna
Profil
#11 · Zasláno: 12. 7. 2012, 19:44:06
Odpovědět Citovat
Tak jsem to nakonec nějak zpytlíkoval. Zatím to všude funguje, tak doufám že u toho i zůstane :-) 
1window.onload = function() {
2 
3    var a = document.getElementById("search_text");
4    var b = document.getElementById("searchform");
5    
6    var onF = function() { if (a.value == a.title) a.value = ""; };
7    var onB = function() { if (a.value == "") a.value = a.title; };
8    var init = function(ele) {
9        ele.value = ele.title;
10        ele.onfocus = onF;
11        ele.onblur = onB;
12    }
13 
14    init(a);
15 
16    var onS = function() { if (a.value == a.title || a.value == "") return false; };
17    var sendIf = function(ele) {
18        ele.onsubmit = onS;
19    }
20 
21    sendIf(b);
22 
23};
window.onload = function() {
 
    var a = document.getElementById("search_text");
    var b = document.getElementById("searchform");
    
    var onF = function() { if (a.value == a.title) a.value = ""; };
    var onB = function() { if (a.value == "") a.value = a.title; };
    var init = function(ele) {
        ele.value = ele.title;
        ele.onfocus = onF;
        ele.onblur = onB;
    }
 
    init(a);
 
    var onS = function() { if (a.value == a.title || a.value == "") return false; };
    var sendIf = function(ele) {
        ele.onsubmit = onS;
    }
 
    sendIf(b);
 
};

Díky všem za rady. Pokud byste k tomu ještě někdo měl co říct (ve smyslu že to jde zjednodušit) tak napište.

to Keeehi:
nevím proč, ale s tím "name" se mi nějak nechtělo zacházet, mám v hlavě, že je to taky nějaký problematický
Časová prodleva: 13 let
Toto vlákno je staré, již dlouho do něj nikdo nepřispíval.

Informace a odkazy zde uváděné už nemusejí být aktuální. Nechcete-li řešit zde uvedenou konkrétní otázku, založte si vlastní vlákno, nepište do tohoto. Vložíte-li sem nyní příspěvek, upoutáte pozornost mnoha lidí a někteří z nich si jen kvůli vám přečtou i všechny předcházející příspěvky. Předpokládáte-li, že váš text skutečně bude hodnotný, stiskněte následující tlačítko:


Běda vám, jestli to bude blábol.

0