<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ciarpame {.com} &#187; mootools</title>
	<atom:link href="http://www.ciarpame.com/tag/mootools/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ciarpame.com</link>
	<description>Useful stuffs for the masses. Useless things for few.</description>
	<lastBuildDate>Tue, 01 Dec 2009 13:03:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4-alpha</generator>
		<item>
		<title>Auto focus al caricamento e backspace funzionante? si può!</title>
		<link>http://www.ciarpame.com/2008/10/20/auto-focus-al-caricamento-e-backspace-funzionante-si-puo/</link>
		<comments>http://www.ciarpame.com/2008/10/20/auto-focus-al-caricamento-e-backspace-funzionante-si-puo/#comments</comments>
		<pubDate>Mon, 20 Oct 2008 07:00:16 +0000</pubDate>
		<dc:creator>Giovanni Savastano</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Tricks]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://www.ciarpame.com/?p=242</guid>
		<description><![CDATA[A volte piccoli accorgimenti rendono la vita dei navigatori molto più semplice. Ad esempio, impostare il cursore della tastiera di default nei box di ricerca è un&#8217;operazione semplice da realizzare e utile per chi arriva sulle vostre pagine. Vediamo come farlo in javascript, grazie a Mootools. Immaginiamo di avere un form di ricerca di questo [...]]]></description>
			<content:encoded><![CDATA[<p>A volte piccoli accorgimenti rendono la vita dei navigatori molto più semplice.<br />
Ad esempio, impostare il cursore della tastiera di default nei box di ricerca è un&#8217;operazione semplice da realizzare e utile per chi arriva sulle vostre pagine.</p>
<p>Vediamo come farlo in javascript, grazie a <a href="http://mootools.net" title="Mootools" alt="mootools" target="_blank">Mootools</a>.<br />
<span id="more-242"></span></p>
<p>Immaginiamo di avere un form di ricerca di questo tipo:<code></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;form action=&quot;/?action=cerca&quot; name=&quot;ricerca&quot; id=&quot;ricerca&quot; method=&quot;get&quot;&gt;
       &lt;input name=&quot;q&quot; id=&quot;q&quot; size=&quot;20&quot; type=&quot;text&quot; /&gt;
       &lt;input type=&quot;submit&quot; value=&quot;Cerca&quot; /&gt;
&lt;/form&gt;</pre></div></div>

<p>Semplice ed essenziale.<br />
Per portare il cursore sul campo "q" il codice necessario è davvero corto:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'q'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
       $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'q'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>L'IF iniziale ci è utile per poter far partire l'azione solo ed esclusivamente quando il form di ricerca è presente nella pagina che si sta visitando ed evitare che venga generato un errore di tipo NOT FOUND o NOT DEFINED</p>
<p>Aggiungiamo ora l'azione al caricamento della pagina:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'domready'</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
       <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'q'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
              $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'q'</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
       <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>L'unico inconveniente di questo trucchetto è che se l'utente si accorge di aver sbagliato pagina e preme il tasto Backspace sulla tastiera per tornare alla pagina precedente, il focus nell'input ne impedirà il funzionamento. E' molto fastidioso!!</p>
<p>Quindi?<br />
quindi dobbiamo fare in modo che alla pressione del Backspace il nostro javascript capisca se stiamo cancellando un testo o stiamo tentando di tornare indietro.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">document.<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'keydown'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
       <span style="color: #003366; font-weight: bold;">var</span> event <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Event<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
       <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">key</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'backspace'</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span>q.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
              history.<span style="color: #000066;">back</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
       <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>fatto!</p>
<p>NOTA: se volete evitare di caricare un framework come mootools nel vostro sito solo per effettuare un'operazione del genere, potete tranquillamente ricorrere al javascript tradizionale in questo modo:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #000066;">onload</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
       <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'q'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
              <span style="color: #003366; font-weight: bold;">var</span> campo <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'q'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              campo.<span style="color: #000066;">focus</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
       <span style="color: #009900;">&#125;</span>
       document.<span style="color: #660066;">onkeydown</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
              <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                      <span style="color: #003366; font-weight: bold;">var</span> event <span style="color: #339933;">=</span> window.<span style="color: #660066;">event</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span>
              <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">keyCode</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">8</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #339933;">!</span>q.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                      history.<span style="color: #000066;">back</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span>
       <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>alla prossima!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ciarpame.com/2008/10/20/auto-focus-al-caricamento-e-backspace-funzionante-si-puo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

