htmljquery-uimobile-safarijquery-ui-selectmenu

Move with iOS keyboard on Jquery UI selectmenu

I have a little problem with iOS safari keyboard and jquery UI selectmenu. With a computer keyboard you can move with the tab key on the fields of a form. In iOs there are two small arrow to move on the fields, I don't know if they have a name. Using them, the selectmenu is skipped.

The code used is the basic implementation: $( select ).selectmenu();

I have already tried to add tabindex to all fields without success.

To clarify this is the arrow: enter image description here

Thanks in advance for any help you can provide.

Solution

  • I suggest to use Bootstrap Forms or jQuery Mobile Selectmenu which use Native iOS select, or as alternative Twitter typeahead which shows a custom dropdown.

    In fact, for some reason, jQueryUI Selectmenu can't receive focus on mobile devices (both Android and iOS).

    Example using Bootstrap 4:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <form>
  
    <div class="form-group">
      <label for="city">City</label>
      <input class="form-control" name="city" id="city" />
    </div>

    <div class="form-group">
      <label for="address">Address</label>
      <input class="form-control" name="address" id="address" />
    </div>
    
    <div class="form-group">
      <label>State</label>
      <select class="form-control">
            <option selected>Select state</option>
            <option value="1">Alabama</option>
            <option value="2">Alaska</option>
            <option value="3">Arizona</option>
       </select>
    </div>
    
  </form>
<div>

    Example using jQuery Mobile:

    $("#state").selectmenu();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
  
<div class="container">
  <form>
  
     <div role="main" class="ui-content">
      <label for="city">City</label>
      <input type="text" name="city" id="city" />
    </div>
    
    <div role="main" class="ui-content">
       <label for="address">Address</label>
       <input type="text" name="address" id="address" />
    </div>
    
    <div role="main" class="ui-content">
      <label for="state" class="select">State</label>
      <select name="state" id="state">
          <option>Alabama</option>
          <option>Alaska</option>
          <option>Arizona</option>
          <option>Arkansas</option>
      </select>
    </div>

  </form>
<div>

    Example using Twitter Typeahead:

    var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

  var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];


  $('#state .typeahead').typeahead({
    hint: true,
    highlight: false,
    minLength: 1
  }, {
    name: 'states',
    source: substringMatcher(states)
  });
    .twitter-typeahead {
  display: block !important;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 100%;
  margin: 1px 0;
  padding: 1px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.jquery.min.js"></script>


  <form>
  
    <div class="form-group">
      <label for="city">City</label>
      <input class="form-control" name="city" id="city" />
    </div>

    <div class="form-group">
      <label for="address">Address</label>
      <input class="form-control" name="address" id="address" />
    </div>
    
    <div id="state" class="form-group">
      <label for="state">State</label>
      <input class="typeahead form-control" name="state" type="text" placeholder="States of USA">
    </div>
    
  </form>
<div>

    Update:

    CodePen playground, easier to see on Safari Mobile: