2012-11-26 27 views
0

所以,首先让我开始说我是jQuery mobile /任何类型的移动设备的新手。不过,我正在使用使用Phonegap的Icenium构建应用程序。我的应用程序运行得非常好,但有两件大事我找不到。如何让输入键在Android/jQuery手机上工作

  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); 
} 

回答

2

你需要让你的页面看起来更像是一个标准的HTML表单,这样浏览器将应用标准形式的行为 - 把表单标签里面的文本框和按钮,并使用input type="submit"代替通用按钮的。

对于选择,请参阅 Select all contents of textbox when it receives focus (JavaScript or jQuery)

+0

虽然这确实工作,我发现最好的答案是简单地连接这样的keyup事件$(“#sessionsSearch”)。keyup(searchSessions) - 谢谢。 – Kenn

0

有没有在移动Enter键。但是,当您点击文本框时,键盘将弹出。在键盘上有“Go”按钮。当你按下它时,会出现按下Enter键的ascii 13按键事件。

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

这是我为我的backbonejs应用程序做的。我为所有文本字段创建了一个全部按Enter键,并且让我说我希望全名的文本字段在按下回车键时更新数据库中的值,以便可以仅通过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'); 

将触发我的骨干视图的输入按键事件,所以我这样做是为了执行更新:

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

这有点像一个黑客,但没有什么可以做输入键只有这样的方式可以完成

相关问题