JQuery：在iPhone上捕獲Enter +完成/返回

我有一個帶有搜索字段的頁面，通過輸入搜索字詞然後點擊回車就可以工作。這在桌面瀏覽器上運行良好，但是捕獲「Enter」按鈕按下的代碼在iPhone（可能還有其他移動瀏覽器）上不起作用。JQuery：在iPhone上捕獲Enter +完成/返回

HTML是一種簡單的輸入字段（這是不是一個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>

然後我結合在了的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(); 
    } 
});*/

你」我會注意到兩個不同的版本 - 第一個是唯一一個適合我的版本，不管瀏覽器是什麼。我嘗試了基於其他堆棧溢出線程的第二個線程，但它甚至不能在Firefox上工作，從不知道iPhone。

我創造了這個小提琴，它不會做任何事情在iPhone上：http://jsfiddle.net/tb653201/

來源

2015-07-10 shimmoril

當我使用Safari訪問您的iPhone 6上的提琴時，我看到一個提醒。你可以請嘗試再次訪問你的iPhone這個小提琴嗎？ –

一種方法來解決您遇到的來包裝你輸入的表單標籤的問題，添加一個隱藏的提交按鈕，然後使用jQuery的「提交」事件來觸發它們。 Mobile發現它是一種形式，並且處理「輸入」鍵按下的方式與正常打字中的不同。

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

更多信息請參閱本：https://api.jquery.com/submit/

來源

2015-07-19 13:53:44

我希望更多的js開發者可以這樣構建他們的前端架構。這利用了瀏覽器的默認行爲，當你堅持標準時，不需要用js重複瀏覽器行爲。榮譽！ – Juank

感謝Tammy，它看起來像我將需要添加一個表格，我希望避免，因爲我們實際上將在未來的某個時間點需要一個主頁。 – shimmoril

@shimmoril沒問題:) –

您可以測試爲返回鍵結果的價值，但它需要在一個textarea抓住它

它也是一個「框架免費」的解決方案，但也可以與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>

來源

2015-07-20 17:52:58 zeachco

哦！，如果你想能夠通過一個多行的段落，你可以改變'input.value = splitedText [0];'input.value = splitedText.join（' '）;' – zeachco

試試這個

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

     generateView(); 
    } 
});

來源

2015-07-22 09:36:34 Ammadu

另一件事我認爲你應該做的是，如果你有一個搜索輸入，是給它一個'search'類型。然後，您還可以利用搜索輸入類型的其他功能，例如數據專家。

來源

2015-07-22 16:39:48 vogomatix

然而，這個問題仍然是瀏覽器早期採用。正如http://www.w3schools.com/html/html_form_input_types.asp所顯示的那樣，它尚未廣泛兼容。 –

是的，但它總是回退到文本輸入框（優雅的降級和所有這些） - 並且您可以使用諸如Modernizr之類的JS庫來提供缺少的功能.... – vogomatix

JQuery：在iPhone上捕獲Enter +完成/返回

回答

相關問題