2012-06-07 5 views
29

Sto sviluppando il sito di front-end per una società di coupon e ho una pagina in cui l'utente deve solo inserire il numero di telefono e $$ spesi. Abbiamo creato una divertente tastiera su schermo integrata in Javascript, che è facile da usare e veloce. Tuttavia, sto cercando una soluzione per fermare la tastiera virtuale da scoppiare quando l'utente si concentra e inserisce testo/numeri in quei campi.HTML Mobile - forzare la tastiera virtuale per nascondere

Conosco gli attributi di tipo "numero/telefono/email" che HTML5 ha creato. Tuttavia, a costo di sembrare pazzo, voglio davvero usare la mia tastiera su schermo.

Nota: questo sito Web è principalmente destinato ai tablet.

Grazie.

+1

Questo è pazzo. Se si utilizzano campi di input standard, utilizzare i metodi di input standard. – egrunin

+7

Ci sono comunque molti vantaggi di avere una tastiera su schermo, oltre a essere divertenti da usare e da costruire. Per uno, sono altamente personalizzabili per soddisfare da vicino le esigenze del pubblico, in secondo luogo, la sicurezza, gli immobili del terzo schermo.;-) – crodica

+0

Ah, vedo che ho frainteso "front end * site *" come "front end * app *". Hai più margine di manovra nelle aspettative degli utenti con un sito web. – egrunin

risposta

34

Poiché la tastiera virtuale fa parte del sistema operativo, il più delle volte, non sarà possibile nasconderla. Inoltre, su iOS, nascondendo la tastiera si riduce l'attivazione dell'elemento.

Tuttavia, se si utilizza l'attributo onFocus sull'ingresso, e quindi blur() il metodo di scrittura immediatamente, la tastiera si nasconderà e l'evento onFocus può impostare una variabile per definire quali l'immissione di testo è concentrata scorso.

Quindi modificare la tastiera sulla pagina per modificare solo l'input di testo dell'ultima messa a fuoco (controllare tramite la variabile), anziché simulare la pressione di un tasto.

+0

Grazie, Scott. Il tuo suggerimento ha funzionato perfettamente quando testato su un normale modulo html, senza la tastiera su schermo. Sembra che il jquery mobile che sto implementando, o l'oggetto della tastiera che sto usando, stia creando i propri eventi di messa a fuoco, che non ho ancora trovato (il "focus" è assegnato ai nomi da qualche parte nella libreria). Per ora, il nostro cliente ha adorato l'idea, ma il fatto che la tastiera morbida continuasse a scoppiare, era stato disattivato, quindi stiamo abbandonando questa funzione. :( Sono interessato a elaborarlo, quindi se qualcuno è interessato, ecco la tastiera della tastiera: https://github.com/Mottie/Keyboard – crodica

+4

Solo un pensiero: cosa succederebbe se mettessi un div trasparente su ogni input, quindi utilizzare il metodo onClick? Ad esempio: '

Text:
'. Il posizionamento relativo (o assoluto) di una divisione padre fa sì che un figlio posizionato in modo assoluto sia relativo al suo genitore. –

36

La risposta di Scott S ha funzionato perfettamente.

Stavo codificando una tastiera telefonica basata su Web per il cellulare, e ogni volta che l'utente premeva un numero sulla tastiera (composto da elementi td span in una tabella), veniva visualizzata la softkey. Volevo anche che l'utente non fosse in grado di toccare la casella di inserimento del numero che viene composto. Questo in realtà ha risolto entrambi i problemi in 1 colpo. Il seguente è stato utilizzato:

<input type="text" id="phone-number" onfocus="blur();" /> 
+1

In realtà, questa risposta ha funzionato meglio per me rispetto alla risposta di @ScottS, non mancare di rispetto alla sua risposta.Subito che il tempo trascorso tra l'istruzione di input html e $ (document) .ready() abbia permesso alla tastiera di sparare, mentre onfocus = blur(); sarebbe più veloce, almeno nella mia mente e impedito alla tastiera di sparare, – HumbleBeginnings

10

Per ulteriori lettori/ricercatori:

Come Rene Pot sottolinea il this topic,

Impostando il campo di immissione per readonly="true" si dovrebbe impedire chiunque a digitare qualcosa nel ma è comunque possibile avviare un evento click su di esso.

Con questo metodo, è possibile evitare di far apparire la tastiera "soft" e ancora lanciare eventi di clic/riempire l'input con qualsiasi tastiera su schermo.

Questa soluzione funziona anche con i raccoglitori di data che generalmente implementano già i controlli.

0

esempio come ho fatto, dopo aver riempito una lunghezza massima si confonderà dal mio campo (e la tastiera scomparirà), se hai più di un campo, puoi semplicemente aggiungere la linea che aggiungo '//'

var MaxLength = 8; 
    $(document).ready(function() { 
     $('#MyTB').keyup(function() { 
      if ($(this).val().length >= MaxLength) { 
       $('#MyTB').blur(); 
      // $('#MyTB2').focus(); 
     } 
      }); });