Autor: Tomáš Jareš

Po kliknutí do inputu vymazat (nahradit) obsah – onfocus v JavaScriptu

Jak vymazat obsah inputu po kliknutí do něj? Pomocí onfocusu v JS!

Určitě se Vám někdy hodí vymazat obsah inputu po kliknutí do něj. Například pro zadání uživatelského jména, hesla, nebo pro vyhlededávání. Řešení je pomocí JS vlastnosti onfocus.

Kapitoly (s kotvami): Vymazání obsahu inputu po kliknutí do něj | Vymazání určitého řetězce textu z inputu po kliknutí do něj | Vymazání určitého (nebo celého)  řetězce textu z inputu a nahrazení jiným po kliknutí do něj | Funguje onfocus i u textarey?

 

Vymazání obsahu inputu po kliknutí do něj (#vymazani)

Text ve value se musí shodovat s tím druhým textem v JS. Červeně zvýrazněné oblasti musí být stejné. HTML s inputem:

<input value=“Text pro vymazání“ onfocus=’if(this.value==“Text pro vymazání„) this.value=““‚>

Do prvního value=““ píšeme text, který se zobrazí v inputu. Ve druhém value==““ se dvěma rovnítkami vkládáme text, který chceme vymazat po kliknutí. Může tam být klidně jen část řetězce z prvního value. Do třetího value=““  vkládáme text,který chceme zobrazit po kliknutí do inputu. My nechceme zobrazit žádný text, proto je tento value prázdný. Živá ukázka.

 

Vymazání určitého řetězce textu z inputu po kliknutí do něj (#retezec)

 Postup je úplně stejný jako u předchozí možnosti, ale jako hodnotí třetího value=““ vložíme jiný text (bez toho předchozího řetězce). Příklad HTML:

<input value=“Text pro vymazání“ onfocus=’if(this.value==“Text pro vymazání„) this.value=“vymazání„‚>

A po kliknutí do inputu s textem Text pro vymazání se zobrazí jen text vymazání. Živá ukázka.

 

Vymazání určitého (nebo celého)  řetězce textu z inputu a nahrazení jiným po kliknutí do něj (#nahrazeni)

Také úplně stejný postup jako předchozí dvě možnosti. Jen jako obsah třetího value=““ zadáte úplně jiný text. Příklad HTML:

<input value=“Text pro vymazání“ onfocus=’if(this.value==“Text pro vymazání„) this.value=“Úplně jiný text po kliknutí„‚>

A po kliknutí do inputu s textem Text pro vymazání se logicky text v inputu nahradí textem z posledního value=““, tedy Úplně jiný text po kliknutí. Živá ukázka.

 

Funguje onfocus i u textarey? (#textarea)

Ano, ale zápis je trochu jiný. Není tam první value, obsah textarey (nebo je na konci měkké i?) se totiž vkládá až mezi tagy <textarea> a </textarea>. Pokud bychom tedy chtěli nahradit text Text pro vymazání textem Úplně jiný text po kliknutí, do druhého (vlastně nyní prvního) value=““ vložíme text shodný s textem mezi tagy <textarea> a </textarea> a do třetího (vlastně druhého) value=““ vložíme nový text. Živá ukázka. Celkový HTML kód pro textareu by vypadal nějak tato:

<textarea onfocus=’if(this.value==“Text pro vymazání„) this.value=“Úplně jiný text po kliknutí„‚>Text pro vymazání</textarea>

 

Je to snadné že? 

Jen nezapomeňte!

Text ve prvním value=““ se vždy musí shodovat s tím druhým value=““ textem. Říkáme tím JavaScriptu s jakým textem má pracovat. Ve třetím value=““  může být libovolný text, který se zobrazí po kliknutí do inputu.

Pokud máte k článku dotazy, objevili jste chybu, nebo chcete pochválit tento článek, neváhejte využít komentáře níže. Budu rád!

CSS vlastnost content

CSS vlastnost content slouží ke vkládání textu pomocí CSS před, nebo za jiný text v HTML. Většinou je potřeba také za text v content vložit mezeru, aby se nový text nelepil na ten v HTML. Pro vložení textu před jiný text v HTML slouží vlastnost before (= předtím) – Živá ukázka:

.text:before {
    content: "Nějaký nový text před jiným textem. "; /* Zde zadáme nový text */
}

Pro vložení textu za jiný text v HTML slouží vlastnost after (= potom) – Živá ukázka:

.text:after {
    content: "Nějaký nový text za jiným textem. "; /* Zde zadáme nový text */
}

Do vlastnosti content nelze vkládat HTML značky (div, span, strong…). Ve zdrojovém kódu se pochopitelně nezobrazí vkládaný text pomocí contentu hned vedle něj, ale zobrazí se až po zobrazení CSS souboru. Tato vlastnost je tedy dobrá třeba před kopírovaním zdrojový kódů (pokud nezkopíruje i CSS).

Pokud Vás zajímá, jak nahradit text pomocí CSS vlastnosti content za jiný, koukněte na tento článek.

 

Nahrazení textu ve spanu jiným textem pomocí CSS vlastnosti content

Pokud máte na stránce nějaký text, který chcete pomocí CSS nahradit jiným, stačí původní text obalit do <span>. Následně lze v CSS nastylovat span tak, aby se nezobrazil – pomocí display: block. A následně vložit jiný text za ten původní (nyní již vymazaný) pomocí CSS vlastnosti content. Text také můžeme obalit divem, ale nemusíme. Takže HTML kód bude:

<div class="text"><span>Původní starý text</span></div>

CSS:

.text:after {
    content: "Nějaký nový text"; /* Zde zadáme nový text */
}

.text span {
    display: none; /* Zde zneveřejníme text ve spanu */
}

Vlastně jsme starý text obalený ve spanu zneviditelnili a naopak pomocí vlastnosti content zveřejnili jiný obsah.

Živá ukázka

Menu v CSS pomocí hover a seznamu ul li

Potřebujete na své stránky vodorovné menu a nechce se Vám vytvářet vlastní? Vytvořil jsem pro vás zdarma šablonu na jednoduché menu s hover efektem za pomoci UL seznamu. Zdrojový kód je dobře okomentovaný, takže určitě poznáte, co k čemu slouží 🙂

HTML:

<div id="obal">   <div id="menu">     <h2>Navigace:</h2>     <ul>       <li class="prvni"><a href="prodej.html">Prodej</a></li>       <li><a href="sluzby.html">Služby</a></li>       <li><a href="cenik.html">Ceník</a></li>       <li><a href="onas.html">O nás</a></li>       <li class="spodni"><a href="kontakt.html">Kontakt</a></li>     </ul>   </div> </div>

CSS: 

#obal {     background: orange;     width: 499px;     height: 38px;     font-family: "Century Gothic", sans-serif; } #menu ul {   width: 700px;   float: left; /* zajišťuje roztažení pozadí za položky nabídky */   margin: 0;   padding: 3px 0;       /* mezera mezi okrajem nabídky a okrajem tlačítek */   list-style-type: none; } #menu ul li {   float: left;          /* zajišťuje vodorovné uspořádání položek nabídky */   border-right: 1px solid black;   border-top: 1px solid black;   border-bottom: 1px solid black;   border-left: 1px solid black;   margin-left: 5px; }   #menu a {   display: block;       /* odkaz se roztáhne přes celou položku nabídky */   padding: 5px 20px;    /* odsazení textu od okraje záložky */   color: red;        /* barva textu odkazu */   font-size: 105%;   font-weight: bold;   text-decoration: none;   transition: 0.8s;  }  #menu a:hover {     color: #EDF0EA;     background-color: red;     transition: 0.3s;  } #menu h2 {   display: none;        /* zrušení vykreslování nadpisu */ }

Živá ukázka

Ke stažení (pro funkčnost, rozbalte zip do nějaké složky)

Obrana proti XSS útokům v PHP

Pokud Vám někdo do inputu, nebo třeba jako název obrázku (který nahraje) vloží nebezpečný JS, který nemáte převedený na entity, vystavujete se tak nebezpečí.

XSS útok na nejmenší úrovni může třeba jen vyalertovat text. Stačí pokud do vstupu (text, file, mail) vloží nebezpečný JS kód (= XSS útok). XSS útok může vypadat například takto:

' onmouseover='alert(1)' data-foo='.jpg

To je ukázka XSS útoku v případě, že nahráváte fotku a uložíte ji pod výše zmíněným názvem. Po najetí na odkaz (po nahrání) se alertem vypíše jednička. A takto se dá zneužít jedna bezpečností díra. Pokud input, nebo file pojmenujeme ve specifikaci jako name=“text“ – př.

<input type="text" size="30" name="text">

můžeme použít PHP kód, který všechny nepovolené znaky (apostrofy, uvozovky, ostré závorky, apod…) změní na entity, které se vypíší jako entity (nepřepíší se na text). Funkce, která to umí se jmenuje htmlspecialchars. Ukážeme si příklad, pokud jsme input (či cokoliv jiného, do čeho se dá vložit text) pojmenovali name=“text“ a ten přes hodnotu POST dali do proměnné $text:

$novapromenna = htmlspecialchars($text, ENT_QUOTES);

Což nám zajistí, že obsah proměnné $text (ve které je uložen obsah inputu) se převede na entity. Převedený text se nám uloží do nové proměnné $novapromenna, se kterou můžeme již dále pracovat (je zaentinovaná). Když je zaentinovaná, znamená to, že se škodlivý XSS útok nespustí, což je pro nás dobře.

Takže aktuální obsah proměnné $novapromenna je například (pokud použiji původní škodlivý kód):

&amp;amp;#039; onmouseover=&amp;amp;#039;alert(1)&amp;amp;#039; foo=&amp;amp;#039;.jpg

Což je správně zaentinovaný útok. Prostě se všechny neobvyklé znaky (které nejsou v klasické latinské abecedě) zaentinují. Doufám, že jste článek pochopili, případně využijte komentářů níže pod článkem.

Generování čísel v PHP bez opakování v daném rozmezí pomocí rand

Pokud potřebujeme na stránce vygenerovat nějaké číslo v rozmezí, které zadáme, můžeme využít PHP. Začínáme!

Do proměnné $nahodnaCisla si pomocí array uložíme rozmezí čísel, ve kterých chceme generovat. Já jsem zvolil rozmezí 1 – 5000 (vyznačeno červeně v kódu), ale můžeme si zadat jakékoliv jiné rozmezí, třeba 2585 – 185005, nebo 1 – 10, je to na Vás. Rozmezí čísel vožíme mezi závorky a oddělíme čárkou, jako je to v kódu níže. Následně se nám do proměnné $cislo uloží vygenerované číslo. Zde je PHP kód:

PHP:

<?php
$nahodnaCisla = array();
do {
    $cislo = rand(1, 5000);
    if (!in_array($cislo, $nahodnaCisla)) $nahodnaCisla[] = $cislo;
} while (count($nahodnaCisla) < 5);
?>                     


Pokud bychom s vygenerovaných číslem chtěli dále pracovat, máme ho stále uložené v proměnné $cislo, kterou můžeme dále zpracovávat jinými skripty. Například poslat do databáze, uložit do souboru, atd…

Pokud bychom chtěli číslo vypsat uživateli pomocí funkce echo, přidáme na konec skriptu (před ?>) ještě tento kód:

echo $cislo;

Ten nám zajistí, že se vypíše samostatné číslo na řádek, které je stále uložené v proměnné $cislo na řádek. Jestli bychom ho ještě chtěli obohatit hláškou „Vygenerované číslo v rozmezí 1 – 5000 je…“, klidně můžeme. Živá ukázka. Na konec kódu (nejdříve bychom odstranili předchozí echo) bychom tedy ještě přidali: 

echo "Vygenerovan&#233; &#269;&#237;slo v rozmez&#237; 1 - 5000 je&nbsp;"; echo "<strong>";  echo $cislo; echo "</strong>";


Kompletně celý PHP kód i s výpisem by tedy mohl vypadat třeba takto:

<?php
$nahodnaCisla = array();
do {
    $cislo = rand(1, 5000);
    if (!in_array($cislo, $nahodnaCisla)) $nahodnaCisla[] = $cislo;
} while (count($nahodnaCisla) < 5);
echo "Vygenerovan&#233; &#269;&#237;slo v rozmez&#237; 1 - 5000 je&nbsp;";
echo "<strong>"; 
echo $cislo;
echo "</strong>";
?>                     


Živá ukázka

Prolnutí v CSS – transition

Občas se nám na webu hodí, když chceme nechat po hoveru prolnout nějaký prvek. K tomu nám slouží šikovná vlastnost v CSS – transition. Transition má pouze jeden parametr a to číslo s eskem.

Příklad: transition: 0.8s značí, že se nám bude prolnutí u hoveru trvat 0,8 sekundy. Jen chci upozornit, že pokud v CSS značíme desetinné číslo, píšeme vždy tečku (místo čárky). Živá ukázka.

HTML:

<a href="http://mujskript.cz">MůjSkript.cz</a>

CSS:

a {
    color: green;
    text-decoration: underline;
    font-weight: bold;
}
 
a:hover {
    color: red;
    text-decoration: none;
    transition: 0.8s;
}

Pokud bychom chtěli i zpětný efekt, po odjetí myší z prvku, vložíme vlastnost transition i k samotnému prvku (bez hoveru). Zde tedy změníme pouze CSS. U zpětného transitionu můžeme mít jinou hodnotu (= jinou délku přechodu). Živá ukázka.

CSS:

a {
    color: green;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.8s; /* Zde se nastavuje zpětný efekt po odjetí myší. Může mít jinou hodnotu */
}
 
a:hover {
    color: red;
    text-decoration: none;
    transition: 0.8s;
}

Máte-li nějaké dotazy, piště do komentářů.

FIXOVÁNÍ 3: Z-index a pozicované prvky

Na DJPW se objevil dotaz, jak udělat, aby se roloval prvek vlevo podle celého webu nad určitým divem, ale aby se schoval pod jiným divem. Za pomoci různých z-indexů je to hračka. 

Nejdříve si doporučuji přečíst předchozí články z fixování:

Uvedu jednoduchý příklad: z-index:1 má menší váhu, než z-index: 2. A z-index:50 má menší váhu než z-index:2. Tím myslím, že to, co má vždy nejmenší váhu z-indexu je nejníže položené na stránce. A co má nejvyšší z-index je na stránce položeno nejvýše. Živá ukázka.

HTML:

<div id="fixovany">
FIXOVANÝ OBJEKT</div>
<div id="cast">
První text, přes který nebude vidět fixovaný panel
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="obsah">
Druhý text, nad kterým bude vidět fixovaný panel
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS: 

#fixovany {
    position:fixed; 
    width: 150px; 
    height: 150px; 
    top: 0; 
    left: 0; 
    background-color:lime; 
    z-index:2; /* Prvek druhý (2), takže je výše, než prvek první*/
}
 
#cast {
    position: absolute; 
    width: 100%; 
    height: 200px;
    top: 0;
    left: 0;
    background-color:yellow; 
    z-index:3; /* Prvek je první (1), takže je dole */
}
#obsah {
    background: red;
    z-index: 1;
    left: 0;
    
}

FIXOVÁNÍ 2: Fixní text při rolování (scrollování)

(Předchozí článek ze série) Potřebujete někdy něco důležitého „přichytit“ ke straně stránky, aby to návštěvníci měli stále na očích a jezdilo to se stránkou? Říká se tomu fixace. Pomocí CSS vlastnosti position: fixed můžeme cokoliv přichytit ke stránce. Nyní si vysvětlíme CSS kód:

  • position: fixed — pevná a neměnná pozice, fixujeme objekt
  • height a width — výška a šířka boxu (elementu) div
  • left: 0px — popostrčení od levé strany stránky. Lze zaměnit za 
    • left (vlevo)
    • right (vpravo)
    • top (nahoře)
    • bottom (dole)
      • Vždy udáváme dvě vlastnosti pozice (vpravo, vlevo) a umístění (nahoře, dole)

HTML:

<div id="fixace-leva-horni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doleva nahoru na stránku.</p>    
</div>
 
<div id="fixace-prava-horni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doleva nahoru na stránku.</p>    
</div>
 
<div id="fixace-prava-dolni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doprava dolů na stránku.</p>    
</div>
 
<div id="fixace-leva-dolni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doleva nahoru na stránku.</p>    
</div>

 

CSS: 

#fixace-leva-horni {
    position: fixed; 
    background: red;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    left: 0px; /* Tímto se určuje pozice na stránce - VLEVO */
    top: 0px; /* Tímto se určuje pozice na stránce - NAHOŘE */
}
 
#fixace-prava-horni {
    position: fixed; 
    background: blue;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    right: 0px; /* Tímto se určuje pozice na stránce - VPRAVO */ 
    top: 0px; /* Tímto se určuje pozice na stránce - NAHOŘE */
}
 
#fixace-prava-dolni {
    position: fixed; 
    background: green;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    right: 0px; /* Tímto se určuje pozice na stránce - VPRAVO */ 
    bottom: 0px; /* Tímto se určuje pozice na stránce - DOLE */
}
 
#fixace-leva-dolni {
    position: fixed; 
    background: orange;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    left: 0px; /* Tímto se určuje pozice na stránce - VLEVO */ 
    bottom: 0px; /* Tímto se určuje pozice na stránce - DOLE */
}

Živá ukázka

Zdrojový kód