如何让回车键在 Android / jQuery mobile 上工作答案

【问题标题】：How to get the enter key to work on Android / jQuery mobile如何让回车键在 Android / jQuery mobile 上工作
【发布时间】：2012-11-26 03:04:22
【问题描述】：

首先让我先说我是 jQuery 移动/任何类型的移动开发的新手。但是，我正在使用使用 Phonegap 的 Icenium 构建一个应用程序。我的应用运行良好，但有两件大事我想不通。

如何与回车按钮交互，即像我的按钮一样触发点击处理程序。
如何在用户单击文本框时突出显示所有文本。所以他们不必使用键盘的返回键。

我尝试过在谷歌上搜索各种术语，但似乎找不到任何东西。问题是你把 jQuery 这个词放在任何东西上，结果都是疯狂的。

这是我的 HTML。

<body>
  <div data-role="page" id="home">
    <div data-role="header">
      <div id='SearchInput'>
        <label for="txtSearchTerm">Search For a Session</label>
        <input type="text" id="txtSearchTerm" value="" />
        <input type="button" id="btnFilterSessions" value="Filter Sessions" />
        <span id="sessionCount"></span>
      </div>
    </div>
    <div data-role="content">
      <ul id="sessionsList"></ul>
    </div>
    <div data-role="footer" data-position="fixed" data-id="oneFooter">
      <span class="footerText">@r0k3t</span>
    </div>
  </div>

这是我完整的 JS。

document.addEventListener("deviceready", onDeviceReady, false);
var codeMashApp = {};
function listSessions(sessions) {
  $("#sessionsList").empty();
  sessions.each(function() {
    var title = $(this).find('Title').text();
    var uri = $(this).find('URI').text();
    $("#sessionsList").append("<li class='sessionTitle'><a href='#detailsPage' id='" + uri + "' data-transition='slide'>" + title + "</a></li>");
  });
  $("#sessionCount").text("Number of sessions: " + sessions.length);
}
function onDeviceReady() {
  $.ajax({
    type: "GET",
    url: "http://rest.codemash.org/api/sessions",
    data: "{}",
    success: function(d) {
      codeMashApp.rootElement = d.documentElement;
      var sessions = $(codeMashApp.rootElement).find("Session");
      listSessions(sessions);
    }
  });
  $("#btnFilterSessions").click(searchSessions);
}
function searchSessions() {
  var searchTerm = $("#txtSearchTerm").val();
  if (searchTerm) {
    var sessions = $(codeMashApp.rootElement).find("Title:contains(" + searchTerm + ")").parent();
    listSessions(sessions);
  } else {
    reloadAllSessions()
  }
}
function reloadAllSessions() {
  var sessions = $(codeMashApp.rootElement).find("Session");
  listSessions(sessions);
}

【问题讨论】：

标签： cordova jquery-mobile

【解决方案1】：

您需要使您的页面看起来更像一个标准的 html 表单，以便浏览器应用标准的表单行为 - 将文本框和按钮放在表单标签内，并使用 input type="submit" 而不是通用按钮。

有关选择，请参阅 Select all contents of textbox when it receives focus (JavaScript or jQuery)

【讨论】：

虽然这确实有效，但我发现最好的答案是像这样简单地连接 keyup 事件 $("#sessionsSearch").keyup(searchSessions) - 谢谢。

【解决方案2】：

手机没有回车键。但是，当您点击文本字段时，键盘会弹出。键盘上有“开始”按钮。当您按下它时，将给出一个 ascii 13 的按键事件，即 Enter 键。

只需正常编写程序并正常捕获按键事件即可进入。在 PC 浏览器中，当用户按下 Enter 键时它会激活该事件，而在移动设备中，如果用户按下 Go 按钮，则会触发该事件。

这就是我为我的backbonejs 应用程序所做的。我为所有文本字段按 Enter 键创建了一个全部内容，并且假设我希望全名的文本字段在按下 Enter 键时更新 db 中的值，以便它可以通过 AJAX 仅针对该字段进行更新而无需按提交按钮：

$(document).on('keypress', 'input', function(event) {   
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        //alert('You pressed a "enter" key in somewhere');  

        alert("DEBUG: ENTER KEY PRESSED!"); 
        var element = event.currentTarget;
        var id = $(element).attr("id");

       if (id == "fullname") {
            $(event.currentTarget).trigger('enter');
            var text = $(event.currentTarget).val();
            localStorage.setItem("memberprofileupdatetype", "fullname");
            localStorage.setItem("memberprofilenameupdate", text);              
            event.preventDefault();
       }
    }
});

这段代码：

$(event.currentTarget).trigger('enter');

将在我的主干视图中触发 Enter 按键事件，所以我这样做是为了执行更新：

events: {
    'enter': 'processUpdate'
},

processUpdate: function() {
    var updatetype = localStorage.getItem("memberprofileupdatetype");
    if (updatetype == "fullname") {
        var newname = localStorage.getItem("memberprofilenameupdate");
        localStorage.removeItem("memberprofileupdatetype");
        localStorage.removeItem("memberprofilenameupdate");

        alert("New name - " + newname);
        //do AJAX update here for the newname
    }
}

这有点像 hack，但您无法为骨干网做任何事情，因为只有 Enter Key 才能做到这一点

【讨论】：