Autor Zpráva
Mufna
Profil
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" />

a v externím JS mám zatím toto:
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
<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
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" />

Jde to nějak upravit ?
Keeehi
Profil
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
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" />

JS (v samostatném souboru):
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" />

Poradí ještě někdo s tímto ?
Trejpa
Profil
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.

<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
Když do initu přidáš ještě
ele.value = ele.title;
budeš mít i předvyplněnou hodnotu.
Mufna
Profil
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
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 ?
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
/* 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
Mufna
Profil
Tak jsem to nakonec nějak zpytlíkoval. Zatím to všude funguje, tak doufám že u toho i zůstane :-)
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ý

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: