Guida Html5 la tua risorsa web sul nuovo markup html5 il linguaggio javascript e lo sviluppo di giochi su browser.
TUTORIALS

Ottenere il focus di un elemento html con Javascript

- 01-12-2014 - Letture: 1335

In questo breve tutorial viene spiegato come ottenere attraverso un semplice codice javascript il focus su un elemento della pagina html

Ottenere il focus di un elemento html con Javascript

Molto spesso, quando realizziamo form di immissione dati oppure giochi all'interno di canvas nelle nostre pagine html abbiamo bisogno di ottenere il focus di input su di essi in modo automatico.

Immaginiamo di far partire un gioco scritto in javascript i cui controlli sono basati sulla tastiera per poi accorgersi che usando i tasti frecce avviene lo scrolling della pagina e non quello che ci aspettiamo, ovviamente questo comportamento confonde l'utente che sarebbe costretto a cliccare sul riquadro del canvas per attivare l'uso dei tasti.

Per ovviare a questo comportamento di default ci basta una semplice riga di javascript alla fine della pagina che richiama il metodo focus() dell'elemento che vogliamo attivare.

 

<html>
<head></head>
<body>
    <canvas id="canvas1"></canvas>
    
    <script>
        document.getElementById("canvas1").focus();
    </script>

</body>
</html>

 

Articoli correlati
Loading comments
ebook sviluppare giochi in html5 e javascript
Il sito Guida HTML5 è stato realizzato da TheArchitect
Nome e Cognome
Email valida
Username
Password
* Cliccando su REGISTRATI accetti le nostre regole sulla privacy
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X

Password dimenticata ? Inserisci il tuo indirizzo email e ti invieremo i dati di accesso

Email valida
ATTENZIONE: controllare sempre la cartella spam nella casella di posta, inquanto è possibile che alcuni provider inseriscano automaticamente la mail di attivazione in questa cartella.

CHIUDI
X
Powered by: World(129)