When using input type=“tel” on a mobile phone, how can I change what the enter key does?

Question

I have a <input> box type="tel" , and when the user enters a number and presses enter on the mobile phone, I want to shift the focus to the select box. But I don't think type="tel" gives an enter key on mobile phones, I think the key is more of like a next but I don't know what the key is exactly. This code works on web browsers, but on my phone pressing the next key always shifts focus to the next <input type="tel"> box.

<input type="tel" name="load1" id="load1" maxlength="4" size="7" 
onkeydown="if (event.keyCode == 13) document.getElementById('numOfReps1').focus()">
<select id="numOfReps1" style="width:75px">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option selected="selected" value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
      <option value="14">14</option>
      <option value="15">15</option>
      </select>

I think my problem is coming from the event.keyCode == 13 , because the mobile version doesn't have an enter key, but I don't know what the key really is.

Answer 1

Update

When a user hits " Done " button, focusout event is fired. As per jQuery Documentation, the difference between blur and focusout is that the latter supports event bubbling ; unlike the former event, which fires once parent element receives the event.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling).

$(document).ready(function () {
  $("#load1").on("focusout", function (e) {
    if(!$(this).val() == "") { /* input isn't empty, move to target */
      $("#numOfReps1").trigger("focus");
    }
  });
});

Demo - focusout ⁽¹⁾

---

There is no e.which nor e.keyChar for next , prev and done mobile buttons. Instead, you can use blur event and check if type=tel has value entered. If true, trigger focus on whatever item you want, if not, it goes to next element by default.

$(document).ready(function () {
  $("#load1").on("blur", function (e) {
    if(!$(this).val() == "") { /* input isn't empty, move to target */
      $("#numOfReps1").trigger("focus");
    }
  });
});

I don't know whther you're using jQuery Mobile, in case you're using it, replace .ready() with pageinit .

$(document).on("pageinit", function () {
  /* code */
});

Demo - blur ⁽¹⁾

⁽¹⁾ Tested on Safari Mobile - iPhone 5