HTML5; rilevare la presenza della tastiera fisica in Javascript

Question

Qual è il modo più affidabile per rilevare se un utente ha una tastiera fisica?

Un'idea è che poiché non esiste una tastiera fisica window.onkeydown potrebbe essere undefined (anziché null). Ma a causa della tastiera virtuale suppongo che non sia il caso. Non ho provato però.

Il mio obiettivo è quello di avere input[type='number'] di un Online Timer da sostituire con raccoglitori di ruote se l'utente non ha una tastiera.

Answer 1

Vedo due approcci.

Il primo approccio sarebbe quello di ascoltare tutti gli eventi di mouse e tastiera. È probabile che un utente con un mouse abbia anche una tastiera. È probabile che un utente che visita un sito web muova il mouse.

Il secondo approccio consiste nel controllare l'agente utente per leggere quale sistema operativo è in esecuzione e presupporre che i dispositivi Android e iOS non dispongano di alcuna tastiera. Per Windows 8 non vedo come l'agente utente potrebbe aiutare, dal momento che Windows 8 gira su tablet e desktop/notebook.

Preferirei avere una soluzione più elegante.

Answer 2

è più affidabile rilevare un touchscreen e mostrare il widget speciale; assicurati che la tastiera sia ancora utilizzabile con il tuo widget di fantasia per l'accessibilità.

Answer 3

Questo diventa davvero complicato con dispositivi come Microsoft Surface, che sono dotati di tastiera, mouse e schermo tattile. E puoi mescolare tutte e 3 le modalità di input in un dato momento oppure aggiungere un altro metodo di input come uno stilo.

Microsoft sta adottando l'approccio di astrarre gli eventi di input come "eventi puntatore". Questo modello has been submitted to the W3C. Questo dovrebbe darti un'idea della tendenza nella gestione dell'input.

Ancora, trovo che sia utile vedere se il tocco è disponibile e funziona presupponendo che — se è — l'utente utilizzerà l'input tattile almeno una parte del tempo. Ciò può portare a decisioni di progettazione per eliminare cose che sono completamente sfavorevoli al tatto, anche se ciò potrebbe significare compromettere le funzionalità del mouse/tastiera.

Nel tuo caso specifico, darei un'occhiata se o non hai nemmeno bisogno di sostituire input[type=number] con un controllo personalizzato. La maggior parte dei dispositivi touch è abbastanza moderna e molti hanno versioni personalizzate e intuitive degli input HTML standard.

Ricordare inoltre gli scenari di accessibilità che i controlli nativi probabilmente supportano "immediatamente".

Se si decide di implementare un controllo personalizzato, suggerirei di rilevare le funzionalità di tocco e di mostrare il controllo personalizzato indipendentemente dalla presenza o meno di altri meccanismi di input. Ciò significa che il controllo personalizzato è (almeno) touch/tastiera/mouse amichevole.

Ecco la mia prova contatto corrente (con il disclaimer che potrebbe rompersi domani e certamente non è stato testato su tutti i dispositivi):

var supportsTouch = ("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0; 

Answer 4

potrebbe essere in grado di determinare il tipo di tastiera, controllando il sistema operativo o anche le dimensioni dello schermo. Android, iOS e tutti i dispositivi con schermi piccoli tendono a non avere tastiere fisiche.