Question

首先让我先谈谈我是jQuery mobile /任何类型的移动设备的新手。但是我正在使用Icenium构建一个使用Phonegap的应用程序。我的应用程序运行得相当不错，但有两件大事我都想不通。

如何与输入按钮进行交互，即触发点击处理程序，就像我的按钮一样。
当用户点击文本框时，如何高亮显示所有文本。因此，他们不必使用键盘后退键。

我尝试使用谷歌搜索各种条款但似乎找不到任何东西。问题是你把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);
}

Answer 1

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

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

Answer 2

移动设备中没有Enter键。但是，当您点击文本字段时，键盘将弹出。在键盘上有＆＃34; Go＆＃34;按钮。按下它时，将发出ascii 13的按键事件，即Enter键。

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

这就是我为我的backbonejs app做的事情。我创建了一个全部按下所有文本字段的Enter键，并且从那里开始，我想要在输入键按下时，我希望fullname的文本字段更新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
    }
}

它有点像黑客攻击，但是你只能通过这种方式为主干线做任何事情

如何让enter键在Android / jQuery mobile上运行

2 个答案: