在 Jquery UI 选择菜单上使用 iOS 键盘移动

Question

我对 iOS Safari 键盘和 jquery UI 选择菜单有点小问题。使用计算机键盘，您可以在表单字段上使用 Tab 键移动。 iOs里面有两个小箭头可以在字段上移动，不知道有没有名字。使用它们，将跳过选择菜单。

使用的代码是基本实现：$( select ).selectmenu();

我已经尝试将 tabindex 添加到所有字段，但没有成功。

澄清这是箭头：

在此先感谢您提供的任何帮助。

Answer 1

我建议使用显示自定义下拉菜单的 Bootstrap Forms or jQuery Mobile Selectmenu which use Native iOS select, or as alternative Twitter typeahead。

实际上，由于某些原因，jQueryUI Selectmenu 无法在移动设备上获得焦点（Android 和 iOS）。

示例使用 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>

使用 jQuery 手机的示例：

$("#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>

使用 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>

带有 Bootstrap4 和 Twitter Typeahead 的 jsfiddle：https://jsfiddle.net/beaver71/ccqht71a/
一个 jsfiddle jQuery手机：https://jsfiddle.net/beaver71/dbs72ujh/

更新：

CodePen 游乐场，在 Safari Mobile 上更容易看到：

带有 Bootstrap4 和 Twitter Typeahead 的 CodePen：https://s.codepen.io/beaver71/debug/mxdbbB/gareYJXpemZr
CodePen jQuery手机：https://s.codepen.io/beaver71/debug/zWYOOx/YvAgOPEaDOZA

在 Jquery UI 选择菜单上使用 iOS 键盘移动

Move with iOS keyboard on Jquery UI selectmenu

html

jquery-ui

mobile-safari

jquery-ui-selectmenu