Chytrá a neotravná antispamová ochrana

Určitě Vás trápí ten otravný spam v diskusích, komentářích, při registraci, nebo při kontaktním formuláři na Vašem webu.

 

Existuje jednoduché a fikané řešení v JavaScriptu. Není moc, co o tom psát, ale ve zkratce popíšu funkčnost.

Na webu máte input, u kterého je napsáno, že máte napsat například číslo 1234 (nějak tajně, třeba tisíc-dvě stě -třicet čtyři). Jelikož by tento input ale návštěvníky otravoval, tak se do tohoto pole automaticky pomocí JavaScriptu vloží číslo 1234 a políčko se i s textem skryje (display: hidden).

 

V případě, že někdo má JavaScript vypnutý (do této skupinu patří roboti, třeba Google, jenž JavaScript neumí interpretovat), tak se mu zobrazí jak input, tak i text a musí toto políčko sám a ručně vyplnit. Jak účinné.

 

No a potom stačí jen v PHP vytvořit podmínku, že pokud v tom a tom inputu bylo yplněno správně číslo 1234, tak se bude dále ve skriptu pokračovat – odesláním dat do DB, nebo třeba e-mailu.

 

Abyste to ale neměli tak těžké, tak pro Vás níže přikládám plně funkční skript (s dovolením převzato z DJPW. Díky):

Do HTML formuláře stačí přiložit políčko

<p id="spamprotirobotum">
  Ochrana proti spamu. Napište prosím číslo tisíc-dvě stě-třicet čtyři: 
  <input type="text" name="robot" value="" id="protirobotum">
</p>

 

a kousek JavaScriptu, který doplní automaticky číslo a zneviditelní políčko (robotovi se JavaScriptová událost neprovede – neumí ho zpracovat). Ještě v JavaScriptu vkládané číslo trošku zošklivíme – musí se nejprve vynásobit (2×617, což je 1234) :

<script> 
  /* vložíme do políčka číslo */ 
  document.getElementById("protirobotum").value = 2 * 617;  

  /* a poté políčko zneviditelníme */ 
  document.getElementById("spamprotirobotum").style.display = "none"; 
</script>

 

A nakonec potom v PHP zjistíme, zda políčko obsahuje správné číslo (a do této podmínky dáme zbytek celého skriptu):

$robot = $_POST['robot']; //do proměnné uložíme obsah políčka  
if($robot == 1234){

  //sem vložíte celý Váš PHP skript a pokud podmínka nebude splněna, nic se neprovede.  

}

 

To je vše 🙂

 

Přenášení hodnot pomocí onclick v Javascriptu

Na diskusi Jak Psát Web (zkráceně DJPW) se uživatel Matess ptal, jak udělat to, že když klikne na odkaz, tak se mu přenese do inputu. Tady máte celé znění dotazu:

Zdravím, mám malou prosbu.
Potřeboval bych poradit jak udělat, že po kliknutí na číslo v tabulce, to číslo přenesu do inputu formuláře.

Něco jako je tady, ale aby se přeneslo jen jedno číslo (to na které kliknu naposledy).
Děkuji za vaše rady.

Já (Marschmallow) jsem mu odpověděl. Nyní Vám to řešení popíšu i zde 🙂

 

Nejprve si sepišme, čeho vlastně chceme docílit

  • v HTML budeme mít odkaz a prázdný input
  • po kliknutí na ten odkaz se nám obsah toho odkazu automaticky vloží do inputu

Co použijeme?

  • JavaScript a jeho prostředky:
  • onClick (něco se udělá po kliknutí)
  • vložení hodnoty value do inputu

Jdeme na to!

<form name="formular">     
  <input type="text" name="policko" value="">     
  <a href="#">ahoj</a> 
</form>

Máme tu jednoduchý formulář s názvem formular a v něm textový input s názevm policko, pak je tu ještě jednoduchý odkaz směřující na # s textem ahoj.

Teď ten kód (přesněji pouze ten odkaz) obohatíme o špetku JavaScriptu – o událost onClick.

<form name="formular">     
  <input type="text" name="policko" value="">   
  <a href="#" onclick="document.formular.policko.value = 'ahoj'">ahoj</a> 
</form>

Teď si ten kus JavaScriptu rozpitváme:

  • onclick – událost, která něco udělá při kliknutí
  • document.formular.policko – tím vybereme, s jakou částí kódu (elementem) chceme pracovat
  • .value – chceme do elementu vložit obsah (value)
  • ahoj – toto je text, který chceme do daného elementu (value) vložit

Nyní si zkuste kód spustit. Po kliknutí na odkaz „ahoj“ by se nám mělo do políčka (inputu) vložit slovo ahoj. Zkusme si kód lehce doplnit:

<form name="formular">
  <input type="text" name="policko" value=""> 
  <a href="#" onclick="document.formular.policko.value = '1'">1</a> 
  <a href="#" onclick="document.formular.policko.value = '2'">2</a> 
  <a href="#" onclick="document.formular.policko.value = '3'">3</a> 
  <a href="#" onclick="document.formular.policko.value = '4'">4</a> 
  <a href="#" onclick="document.formular.policko.value = '5'">5</a> 
</form>

Výše uvedený kód funguje úplně na stejném principu a úplně stejně ;). Akorát jsme přidali více odkazů. Vždy po kliknutí na jeden z odkazů se políčko vymaže a doplní tím novým odkazem – tzn., že když klikneme dvakrát na dvojku a pětkrát na jedničku, bude tam stále pouze to poslední číslo, na které jsme klikli.

Samozřejmě, že to nemusí být jenom číslice, ale i text, znaky, apod…

Vše si teď klidně vyzkoušejte – Živá ukázka.

Slovníček v JavaScriptu

Pokud chcete na své stránky vložit jednoduchý slovníček, je možné použít JavaScript.

Předem upozorňuji, že se to ani zdaleka nebude podobat třeba slovníku od Googlu. Vkládání slov je velice jednoduché, každé slovo a překlad vždy na jeden řádek odděleno dvojtečkou v uvozovkách. Př. „jedna“ : „one“, 

Živá ukázka kompletního a funkčního slovníčku. Zkuste si do pole „Text“ zadat třeba slovo jedna, dva, pět, nebo třeba dvanáct. Poté stisknout tlačítko „Přeložit“. Pokud slovíčko existuje a je uložené v JavaScriptu, vypíše se jeho překlad (druhé uvozovky), pokud neexistuje, vypíše se ho pole hláška „Chybí překlad!“. Zdrojový kód:

HTML:

<form action="" onsubmit="preloz(this); return false">
    <h3>Online slovníček:</h3>
    <input type="text" onfocus='if(this.value=="Text") this.value=""' value="Text" name="prelozit">
    <button>Přeložit</button>
<input type="text" value="Výsledek" name="prelozeno">
</form>

JS:

// JavaScript Document - CZ/AJ SLOVNICEK

function preloz(el) {
    var slova = {
        "jedna" : "one", 
        "dva" : "two",        
    };

    if (slova[el.prelozit.value]) {
        el.prelozeno.value = slova[el.prelozit.value];
    }
    else {
        el.prelozeno.value = "Chybí překlad!";
    }
}

V kódu JavaScriptu (JS) jsem čeveně vyznačil místa, kam se vkládají slova. Uvedu ještě jednou příklad:

"jedna" : "one", 

Slovo jedna zadává uživatel a slovo one se mu automaticky vygeneruje do vedlejšího políčka pomocí JavaScriptu. Pokud bychom třeba chtěli přeložit slovíčko papír, které zadá uživatel do angličtiny, tedy na slovíčko paper, kód by vypadal následovně:

"papír" : "paper", 
Snad jste to pochopili. Pokud ne, připravil jsem pro Vás oddělenou ukázku pouze se slovem papír. Živá ukázkaDále platí pravidlo, že co nový překlad (tedy dvě slovíčka), to nový řádek. Jednotlivé překlady ještě oddělujeme čárkou na konci ,.

Máte-li připomínky, či dotazy, nebo nápady, nebojte se využít komentářů níže pod tímto článkem.

Návrat na přechozí stránku pomocí history.back() v JS

Pokud se pomocí JS tlačítka chcete vrátit zpět na předchozí stránku, využijte možnosti historyback(). Plně funkční ukázka:

<input type=button onclick="history.back()" value="Vrátit se na předchozí stránku">

Samozřejmostí pro funkčnost je zapnutý a podporovaný JavaScript. Tlačítko nefunguje, pokud se stránka otevírá do nového tabu, nebo okna. Živá ukázka.

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ějVymazání určitého (nebo celého)  řetězce textu z inputu a nahrazení jiným po kliknutí do nějFunguje 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!

Změna textu po kliknutí na obrázek (div, nebo odkaz)

Stačí zaměnit jen to, co je červeně vyznačené. Tedy cesty k obrázkům a „střídavé“ texty.

HTML (celý zdrojový kód):

<a href="javascript:;" onclick="this.style.display = 'none'; 
document.getElementById('t1').style.display = 'none';
document.getElementById('2').style.display = 'block';
document.getElementById('t2').style.display = 'block';"
id="1">
<img src="http://diskuse.jakpsatweb.cz/img/logo.png"></a>
<a href="javascript:;" onclick="this.style.display = 'none'; 
document.getElementById('t2').style.display = 'none';
document.getElementById('1').style.display = 'block';
document.getElementById('t1').style.display = 'block';"
style="display: none;" id="2">
<img src="http://diskuse.jakpsatweb.cz/img/logo.png "></a>
<div id="t1">Nějaký <strong>první</strong> hrooozně dlouhý text.<br></div>
<div id="t2" style="display: none;">Nějaký <strong>druhý</strong> hrooozně dlouhý text.</div>
 

Živá ukázka

Zdrojový kód

Animace načítání po kliknutí na odkaz – JavaScript

Živá ukázka

HTML: 

<img src="http://ukazky.mujskript.cz/img/loading.gif" alt="" id="nacitani">
<a href="http://mujskript.cz" onclick="okno()">MůjSkript.cz</a>

 

CSS (je důležité pro skrytí prvku nacitani):

#nacitani {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

JS:

function okno() {
    document.getElementById("nacitani").style.display = "block";
}

Živá ukázka

Animace načítání stránky – JavaScript

Klikněte si:

Živá ukázka

Zdrojový kód

Hezké, že? Po kliknutí na tlačítko se úplně nahoře na stránce promítne červené znázornění načtení stránky. V HTML kódu stačí na prvním řádku změnit číslo u buttonu u prubeh ze čtyřky na libovolné číslo (zvýrazněno červeně):

HTML:

<button onclick="prubeh(4, document.getElementById('postup'))">Klikni pro spuštění animace na vrchu stránky</button>
<div id="postup" class="postup"></div>

CSS:

.postup {height: 10px; background: red; width: 0; position: fixed; top: 0; left: 0;}

JS:

    var prubeh = function(cas, postup) {
    var animovat = function() {
        postup.style.transition = "width " + cas + "s";
        postup.style.width = "100%";  
    };
    
    var vycistit = function() {
        postup.style.width = "0";
        postup.style.transition = "";
    };
    
    animovat();
    setTimeout(vycistit, cas * 1000);
};

Kurzor v inputu (poli) ihned po načtení stránky v JavaScriptu

Taky chcete mít hned po načtení stránky blikající kurzor v daném inputu? Třeba jako má Seznam.cz? Tento způsob se hodí zejména por vyhledávání. 

Důležité je pouze správně pojmenování NAME v inputu (v kódu vyznačeno červeně)!

HTML:

<input name="q" type="text" size="40" id="nejakepole">

JS: 

document.getElementById("nejakepole").focus();

Živá ukázka

Zdrojový kód