.focus() problema con JQUERY MOBILE?

Penso che l'evento di messa a fuoco non funzioni con JQuery mobile: ecco il mio codice? cosa ne pensi e grazie.
(quando elimino la chiamata al cellulare libreria jQuery, funziona).focus() problema con JQUERY MOBILE?

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
    </head> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#acceuil').live('pagecreate', function(event) { 
       $('#declencher').click(function() { 
        $('#cache').focus(); 
       }); 
       $('#declencher').trigger('click'); 
      }); 
     }); 
    </script> 
    <body> 
     <div data-role="page" id ="acceuil" > 
      <div data-role="header" data-theme="a" ><h3>aaa</h3></div> 
      <div data-role="content"> 
       <input id="cache" type="input">  
       <input type="button" id="declencher" value="declencher"> 
      </div><!-- content--> 
      <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer </h3></div> 
     </div> 
    </body> 

</html>

fonte

2011-08-24 Wassim Sboui

più pulito di solito stata prelevata più veloce .... –

hai provato a rimuovere .ready '$ (document)()'? Come suggerito nella doco, dovresti associare gli eventi a 'pagecreate' invece di' document.ready'. –

grazie per la scrittura, penso che la mia domanda sia chiara !!! ho rimosso $ (document) .ready() ma non funziona, penso che focus() non sia supportato da jquery mobile –

pagecreate generato l'evento prima jQm fa alcune modifiche al DOM quindi suppongo che la messa a fuoco è perso allora.

Provare a passare a pageshow, soprattutto perché si desidera ottenere il focus ogni volta che l'utente accede a una pagina.

Se ancora non funziona (c'era un tale caso) inserire il codice che attiva messa a fuoco in un timeout (sì, è un hack :))

setTimeout(function(){ 
$('#cache').focus(); 
},0);

Si tratta di un hack, ma non dipende dall'attendere un intervallo di tempo. setTimeout() aggiunge la funzione alla coda del thread di rendering (che è ciò che esegue javascript e il rendering della pagina nel browser) dopo il tempo specificato. Quindi in questo caso la funzione viene aggiunta istantaneamente, quindi viene eseguita dopo il flusso corrente del codice javascript. Quindi è un modo per far funzionare qualche codice subito dopo la fine del gestore di eventi. Quindi non è così hacky come si potrebbe pensare. Lo chiamo un hack, perché sta usando la conoscenza di come funziona il browser e oscura il flusso dell'esecuzione del codice.

Mi raccomando di leggere su come l'esecuzione di javascript e il disegno di pagina sono gestiti dalla stessa coda in un singolo thread. A chiunque lavori con più di 20 linee di javascript.

Sono abbastanza sicuro che c'è solo una soluzione migliore - risolvere il problema in framework jQuery Mobile stesso.

fonte

2011-08-31 10:27:21 naugtur

funziona con setTimeout ..., grazie –

ho faticato a trovare una soluzione più elegante a questo problema. Questo funziona, ma su hardware diversi questo hack potrebbe funzionare in modo incostante. Ho provato l'intera gamma di jquery mobile costruiti in eventi. Il meglio che posso ottenere senza questo hack è di abilitare la "halo" (effetto glow) sul campo che è focalizzato. Il cursore non viene visualizzato. Qualcuno ha altre idee? – mfalto

Questo hack non dipenderà dall'hardware. Vedi modifica. – naugtur

Se si utilizza HTML5 , quindi utilizzare l'attributo autofocus.

<body> 
    <div data-role="page" id ="acceuil" > 
     <div data-role="header" data-theme="a" ><h3>aaa</h3></div> 
     <div data-role="content"> 
      <input id="cache" type="input" autofocus>  
      <input type="button" id="declencher" value="declencher"> 
     </div><!-- content--> 
     <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer  </h3></div> 
    </div> 
</body>

prega di fare riferimento Autofocus attribute of HTML5

fonte

2013-10-25 12:56:57

provate questo, funziona sul mio cellulare Safari, Chrome e anche browser desktop

// div is some selected element 
      var f = function(event) { 
       $timeout(function() { // angular way, setTimeout is OK 
        input[0].focus(); 
        event.preventDefault(); 
       }) 
      }; 

      var mobile = false; 
      div.on('click', function(event) { 
       if(mobile) return; 
       f(event); 
      }); 

      div.on('touchstart', function(event) { 
       mobile = true; 
       f(event); 
      }); 

      div.on('touchend', function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
      });

fonte

2015-07-24 16:49:17 Orthocenter

-1

Questa è solo un'altra opzione e non l'esatto soluzione, questo può servire allo scopo nel caso in cui le soluzioni di cui sopra non funzionano.

Facendo clic sul collegamento Vendite, lo stato attivo passerà alla dichiarazione di non responsabilità, in questo caso l'offset deve essere menzionato secondo le proprie esigenze.

<div class="sales"> 
    <a href="#sales-disclaimer" onclick="setFocusToSales()"> 
     Sales 
    </a> 
</div> 

<div id='sales-disclaimer'> 
    some text here........ 
</div>

/funzione Javascript/

function setFocusToSales() 
{ 
    $('html, body').animate({ 
     scrollTop: $('#sales-disclaimer').offset().top 
    }, 1000); 
}

fonte

2015-09-29 11:08:40

-1

risolto

$(document).on("pageshow", "#casino", function(event) { 
    var txtBox=document.getElementById("SearchUsuario"); 
    txtBox.tabindex=0; //this do the trick 
    txtBox.value=""; 
    txtBox.focus(); 
});

fonte

2016-03-08 16:14:14

Sul UIWebView, impostare keyboardDisplayRequiresUserAction a NO.

Se si utilizza utilizzando Cordova o PhoneGap, nella configurazione.xml aggiungere il seguente:

domanda

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>

fonte

2017-01-26 14:43:27

.focus() problema con JQUERY MOBILE?

risposta

Problemi correlati