JQuery: Capture Enter + Fertig/Return auf dem iPhone

Ich habe eine Seite mit einem Suchfeld, das funktioniert, indem Sie Ihren Suchbegriff eingeben und dann Enter drücken. Dies funktioniert gut bei Desktop-Browsern, aber mein Code, der die "Enter" -Taste drückt, funktioniert nicht auf dem iPhone (und möglicherweise anderen mobilen Browsern).JQuery: Capture Enter + Fertig/Return auf dem iPhone

HTML ist ein einfaches Eingabefeld (die nicht innerhalb eines FORM-Element ist):

<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>

Und ich bin Bindung der keypress dann im 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(); 
    } 
});*/

Sie‘ Ich werde die zwei verschiedenen Versionen bemerken - die erste ist die einzige, die überhaupt für mich funktioniert, egal welchen Browser. Ich habe versucht, die zweite basierend auf einigen anderen Stack Overflow-Threads, aber es funktioniert nicht einmal auf Firefox, vergiss das iPhone.

ich diese Geige geschaffen, die nichts auf dem iPhone macht: http://jsfiddle.net/tb653201/

Quelle

2015-07-10 shimmoril

Als ich mit Safari auf Ihrem iPhone 6 auf Ihre Geige zugegriffen habe, habe ich eine Warnung angezeigt. Kannst du bitte versuchen, diese Geige auf deinem iPhone erneut aufzurufen? –

Ein Weg, um die Probleme zu bekommen Sie haben Ihre Eingabe in einem Formular-Tag zu wickeln, fügen Sie einen Knopf versteckt einreichen und verwenden Sie dann die "Submit" -Ereignisse von jQuery, um sie auszulösen. Mobile nimmt die Tatsache auf, dass es sich um ein Formular handelt und behandelt die "Enter" -Taste anders als beim normalen Tippen.

$("#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>

dies für weitere Informationen siehe: https://api.jquery.com/submit/

Quelle

2015-07-19 13:53:44

Ich hoffe, dass mehr js-Entwickler ihre Front-End-Architektur auf diese Weise strukturieren würden. Dies nutzt das Standardverhalten von Browsern, sodass Sie ein Browserverhalten mit js nicht wiederholen müssen, wenn Sie sich an Standards halten. Kudos! – Juank

Danke Tammy, es sieht so aus, als müsste ich ein Formular hinzufügen, was ich vermeiden wollte, da wir irgendwann auf dieser Seite ein Hauptformular brauchen werden. – shimmoril

@shimmoril Kein Problem :) –

Sie könnten für das Return-Taste Ergebnis im Wert testen, aber es muss in einem Textfeld, um es zu fangen

es ist auch eine "Framework-freie" Lösung, kann aber auch mit jQuery verwendet werden

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>

Quelle

2015-07-20 17:52:58 zeachco

Oh !, und wenn Sie in der Lage sein möchten, einen Absatz mit mehreren Zeilen zu überschreiten, können Sie 'input.value = splitedText [0];' für 'input.value = splitedText.join (' '); ' – zeachco

dieses Versuchen

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

     generateView(); 
    } 
});

Quelle

2015-07-22 09:36:34 Ammadu

Eine andere Sache, ich glaube, Sie tun sollten, wenn Sie eine Sucheingabe haben, ist es eine 'search' Art zu geben. Dann nutzen Sie auch andere Funktionen des Sucheingabetyps wie Datenlisten.

Quelle

2015-07-22 16:39:48 vogomatix

Das Problem dabei ist jedoch, dass es immer noch von Browsern verwendet wird. Wie http://www.w3schools.com/html/html_form_input_types.asp zeigt, ist es noch nicht weitgehend kompatibel. –

Ja, aber es fällt immer auf eine Texteingabebox (gradeful degradation und all das) zurück - und Sie können JS-Bibliotheken wie Modernizr verwenden, um die fehlende Funktionalität bereitzustellen .... – vogomatix

JQuery: Capture Enter + Fertig/Return auf dem iPhone

Antwort

Verwandte Themen