Napovídání při vyplňování políček

t.machala

Zdravím,
řeší nějak Nette takovou tu napovídací funkci, kdy je v textovém políčku nějaká předvyplněná hodnota, která uživateli vysvětluje, co do něj má zadat a při získání focusu se pomocí JavaScriptu smaže a potom zase případně objeví, pokud jej uživatel nechá prázdné?

Nikde v dokumentaci jsem ji nenašel.

Díky.

Tomik

Nikoliv, ale není složité si to napsat sám. Např. pomocí jQuery.

Ondřej Mirtes

Příklad, jak vytvořit našeptávač, je v jednom článku ze seriálu o Nette na Zdrojáku.

t.machala

Ok, díky :)

redhead

Ondřej Mirtes napsal(a):

Příklad, jak vytvořit našeptávač, je v jednom článku ze seriálu o Nette na Zdrojáku.

myslím, že t.machala, nemyslí našeptávač, ale takovou tu implicitní hodnotu, která se zobrazuje v inputu (jako „sem vložte username“). Placeholder se to jmenuje v HTML5??

Ale jak říká Tomik, dělat to v JavaScriptu, třeba přes jQuery.

t.machala

Ano, přesně to jsem myslel.

Ondřej Mirtes

Aha, tak to jsem nepochopil :)

Říká se tomu placeholder a má to podporu v HTML 5. Já to v hledacím políčku řeším takto (umístit do $(document).ready()) – včetně světlejší barvy, pokud je tam ten výchozí text:

//search input placeholder
if ($("#frmsearchForm-q").val() == "hledat...") {
    $("#frmsearchForm-q").css("color", "#848484");
}

$("#frmsearchForm-q").focus(function() {
    if ($(this).val() == "hledat...") {
        $(this).css("color", "#1E1E1E");
        $(this).val("");
    }
});

$("#frmsearchForm-q").blur(function() {
    if ($(this).val() == "") {
        $(this).css('color', '#848484');
        $(this).val("hledat...");
    }
});

Filip Procházka

Ondřej Mirtes napsal(a):
//search input placeholder
//...

Ondro jenom takovej detail, při každém volání jQuery přes $ čili každá nová inicializace, se znovu hledá element a vytváří se další instance, ono je to sice při pár scriptech zanedbatelný ale až jich budeš mít víc, bude ti každej návštěvník se slabším pc děkovat za každej cachnutej objekt.

//search input placeholder
var frmsearchForm = $("#frmsearchForm-q");

if (frmsearchForm.val() == "hledat...") {
    frmsearchForm.css("color", "#848484");
}

frmsearchForm.focus(function() {
    if ($(this).val() == "hledat...") {
        $(this).css("color", "#1E1E1E").val("");
    }
}).blur(function() {
    if ($(this).val() == "") {
        $(this).css('color', '#848484').val("hledat...");
    }
});

takhle se mi to libí vic :)

Ondřej Mirtes

Jasně no, já radši ušetřím počet řádků :) Ale kdyby jich mělo být milión, tak se nad optimalizací zamyslím :)