How to get the enter key to work on Android / jQuery mobile

Question

So first let me start by saying I am new to jQuery mobile / any type of mobile dev. However I am building an app using Icenium which uses Phonegap. My app works fairly nicely but there are two big things I can't figure out.

How to interact with the enter button i.e. fire the click handler like for my button.
How to higlight all the text when the user clicks into the text box. So they don't have to use the keypads back key.

I have tried googling various terms but can't seem to find anything. The problem is you put the word jQuery in anything and the results are insane.

Here is my 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>

Here is my complete 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);
}

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

You need to make your page look more like a standard html form so that the browser will apply standard form behaviour - put the textbox and button inside a form tag, and use input type="submit" instead of a generic button.

For the selection, see Select all contents of textbox when it receives focus (JavaScript or jQuery)

edited May 23 '17 at 10:27

Community

1
1

answered Nov 26 '12 at 04:10

Tom Clarkson

16,074
2
43
51

While this does indeed work I found that the best answer was to simply wire up the keyup event like this $("#sessionsSearch").keyup(searchSessions) - Thanks though. – Kenn Dec 10 '12 at 13:40

jumper rbk · Answer 2 · 2016-10-20T12:13:43.917

There is no Enter key in mobile. However when you tap on a textfield the keyboard will popup. In the keyboard there is the "Go" button. When you press it, that will give a keypress event of ascii 13 which is the Enter key.

Just write your program normally and catch a keypress event for enter as normal. In the pc browser it will activate the event when the user press the Enter key, however in mobile, the event will fired if the user press the Go button.

This is what I do for my backbonejs app. I create a catch all for pressing Enter key for all textfield and from that let say I want the textfield for fullname to update the value in db when the enter key is press so that it can be updated only for that field via AJAX without pressing a Submit button:

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

this code:

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

will trigger an Enter keypress event in my backbone view, so I do this to execute the update:

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

It's a little bit like a hack, but nothing you can do for backbone coz for Enter Key only that way can be done

How to get the enter key to work on Android / jQuery mobile

2 Answers2