JQuery: Cattura Invio + Fine/Ritorna su iPhone

Ho una pagina con un campo di ricerca che ha lo scopo di funzionare digitando il termine di ricerca e quindi premendo invio. Funziona perfettamente con i browser desktop, ma il mio codice che cattura la pressione del pulsante "Invio" non funziona su iPhone (e probabilmente su altri browser mobili).JQuery: Cattura Invio + Fine/Ritorna su iPhone

HTML è un semplice campo di input (che non è all'interno di un elemento FORM):

<div class="col-xs-12 col-sm-3 action-row padding pull-right xs-margin-up"> 
    <span class="k-textbox k-button k-space-left col-xs-12 search-box"> 
     <i class="fa-icon-search"></i> 
     <input id="search" placeholder="Search" /> 
    </span> 
</div>

E poi sono vincolanti la pressione di un tasto nella document.ready:

$(this).keypress(function(event) { 
    if ($('#search').is(":focus") && event.which == 13) { 
     search = $('#search').val();  

     generateView(); 
    } 
}); 

/*$('#search').bind('keypress', function(e) { 
    if (e.which == 13) {  
     search = $('#search').val();  

     generateView(); 
    } 
});*/

You' noteremo le due versioni differenti - la prima è l'unica che funziona per me, indipendentemente dal browser. Ho provato il secondo basato su altri thread Stack Overflow, ma non funziona nemmeno su Firefox, non importa l'iPhone.

Ho creato questo violino, che non fa nulla su iPhone: http://jsfiddle.net/tb653201/

fonte

2015-07-10 shimmoril

Quando ho eseguito l'accesso al violino sul mio iPhone 6 utilizzando Safari, ho visto un avviso generato. Puoi provare di nuovo ad accedere a questo violino sul tuo iPhone? –

Un modo per aggirare i problemi che stai avendo è quello di avvolgere il vostro input in un tag form, aggiungere un pulsante nascosto submit e quindi utilizzare gli eventi "invia" di jQuery per attivarli. Mobile rileva il fatto che si tratta di un modulo e gestisce la pressione del tasto "Invio" in modo diverso rispetto alla normale digitazione.

$("#myform").on("submit", function(event){ 
 
    event.preventDefault(); 
 
    // Your custom search functions here 
 
});

#myform input[type='submit'] { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="col-xs-12 col-sm-3 action-row padding pull-right xs-margin-up"> 
 
    <span class="k-textbox k-button k-space-left col-xs-12 search-box"> 
 
    <i class="fa-icon-search"></i> 
 
    <form id="myform" action="#"> 
 
     <input id="search" placeholder="Search" /> 
 
     <input type="submit" value=""> 
 
    </form> 
 
    </span> 
 
</div>

Vedere questo per ulteriori informazioni: https://api.jquery.com/submit/

fonte

2015-07-19 13:53:44

Spero che più sviluppatori di js struttureranno la loro architettura di front end in questo modo. Questo sfrutta il comportamento predefinito dei browser, senza la necessità di ripetere un comportamento del browser con js quando si rispettano gli standard. complimenti! – Juank

Grazie a Tammy, sembra che avrò bisogno di aggiungere un modulo, che speravo di evitare, dal momento che in futuro avremo bisogno di un modulo principale in questa pagina. – shimmoril

@shimmoril Nessun problema :) –

Si potrebbe verificare il risultato chiave di ritorno in valore, ma ha bisogno di essere in una textarea di catturarlo

inoltre è una soluzione "framework free" ma può essere utilizzata anche con jQuery

document.getElementById('search').addEventListener('keyup', checkValue); 
 

 
function checkValue(event){ 
 
    var input = event.target; 
 
    var splitedText = input.value.split(/\n/g); 
 
    input.value = splitedText[0]; 
 
    if(splitedText.length> 1) 
 
    alert('enter or whatever was pressed'); 
 
}

textarea.input{ 
 
    overflow: hidden; 
 
    resize: none; 
 
}

<html> 
 
    
 
    <body> 
 
    
 
    <textarea id="search" class="input" placeholder="search" cols="30" rows="1" wrap="off"></textarea> 
 
    
 
    </body> 
 
</html>

fonte

2015-07-20 17:52:58 zeachco

Oh !, e se vuoi essere in grado di superare un paragrafo con più righe puoi cambiare 'input.value = splitedText [0];' per 'input.value = splitedText.join (' '); ' – zeachco

Prova questa

$('#search').keyup(function(event) { 
    if (event.which == 13) { 
     search = $('#search').val();  

     generateView(); 
    } 
});

fonte

2015-07-22 09:36:34 Ammadu

Un'altra cosa Credo che si dovrebbe fare è se si dispone di un ingresso di ricerca, è quello di dare un tipo 'search'. Quindi sfrutta anche altre caratteristiche del tipo di input di ricerca come i datalists.

fonte

2015-07-22 16:39:48 vogomatix

Il problema con questo, tuttavia, è che è ancora in adozione anticipata dai browser. Come mostra http://www.w3schools.com/html/html_form_input_types.asp, non è ancora ampiamente compatibile. –

Sì, ma ricade sempre in una casella di testo (degradazione graduale e tutto il resto) - ed è possibile utilizzare librerie JS come Modernizr per fornire la functonality mancante .... – vogomatix

JQuery: Cattura Invio + Fine/Ritorna su iPhone

risposta

Problemi correlati