2012-01-08 23 views
16

Ho un problema con la tastiera nascosta nel simulatore iPhone. Il mio codice HTML:Come nascondere la tastiera nella pagina jQueryMobile in un'app Phone Phone?

<form id="my_form"> 
    <input type="search" id="searchBar" /> 
</form> 

codice jQuery:

$("#my_form").submit(function() { 
    one = $('#searchBar').val(); 
    console.log(one); 
    doSearch(one); 
    return false; 
}); 

Tutto funziona come ho bisogno: posso ottenere il valore forma e eseguire alcune Ajax. Ma quando la funzione restituisce false, la tastiera virtuale nel simulatore iPhone è ancora visibile. Come nascondere la tastiera? C'è un altro metodo per farlo? Devo passare i dati al server usando Ajax quando l'utente cerca e preme "Vai" su iPhone. Il risultato della ricerca dovrebbe essere mostrato nella stessa pagina (già fatto). L'utente può di nuovo cercare nella stessa pagina.

Per favore aiutatemi.

Grazie,

--regeint

risposta

1

Grazie Hosh Sadiq e techfoobar per avermi aiutato. In realtà ho fatto quanto segue e ha funzionato. Non ha effetto sul css sopra o sotto questo elemento.

$('.clr').after('<input type="checkbox" id="focusable" style="height:0; margin-left:-200px; clear: both;" />'); 
$('#focusable').focus(); 

Grazie ancora. :)

1

Prova ad aggiungere un altro elemento attivabile (es: un <select>) alla tua pagina (impostare l'altezza a 0 in modo che il suo non è visibile ancora attivabile), e spostare l'attenzione a quell'elemento prima di restituire false.

2

In jQuery, se si return false;, si interrompe il comportamento predefinito del browser, che, in questo caso, è sia l'invio del modulo sia la chiusura della tastiera. Il seguente dovrebbe funzionare:

<form id="my_form"> 
    <input type="search" id="searchBar" /> 
    <div style="height:0;width:0;"> 
     <input id="focusable" type="checkbox" /> 
    </div> 
</form> 

jQuery:

$("#my_form").submit(function(){ 
    one = $('#searchBar').val(); 
    console.log(one); 
    doSearch(one); 
    $('#focusable').focus(); 
    return false; 
}); 
+0

Hi Hosh, non sta funzionando.La tastiera è ancora visibile :( – regeint

+0

Prova a fare ciò che ha fatto techfoobar ma con una casella di controllo anziché una selezione come suggeriva (una selezione probabilmente farà un popup di una lista vuota) Ho aggiornato la mia risposta per rispecchiare questo –

32

Invece di passare attivo a un altro elemento che si può semplicemente offuscare il vostro contributo in questo modo:

$('#searchBar').blur(); 

Sarà nascondere la tastiera virtuale.

+0

I love le risposte facili - semplici ed efficaci, grazie! – zeroasterisk

1

ho usato soluzione regeint ma modificato un po 'che non funziona perché ho detto PhoneGap per consentire che mostra la tastiera senza interazione da parte dell'utente in Cordova.plist ho impostato KeyboardDisplayRequiresUserAction a NO

function hideTheKeyBoard() { 
    $($.mobile.pageContainer).after('<input type="checkbox" id="focusable" style="height:0;margin-left:-200px;" />'); 
    $('#focusable').focus();// maybe .blur() would work too. 
    $('#focusable').remove(); 
} 
17

da here

È abbastanza auto-esplicativo. La seconda linea disattiverà tutti i campi di input e si basa su jQuery. Ho scoperto che chiamare blur() sul singolo campo di testo focalizzato non sempre funzionava. O una di queste linee dovrebbe funzionare indipendentemente, ma entrambe non possono essere fermate!

var hideKeyboard = function() { 
    document.activeElement.blur(); 
    $("input").blur(); 
}; 
Problemi correlati