1

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

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

我试过谷歌搜索各种术语，但似乎找不到任何东西。问题是你把 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);
}
4

2 回答 2

2

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

有关选择，请参阅 当文本框获得焦点时选择文本框的所有内容（JavaScript 或 jQuery）

于 2012-11-26T04:10:06.227 回答
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，您无能为力，因为只有这样才能完成

于 2016-10-20T12:07:08.390 回答