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

Question

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

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

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

为了澄清这是箭头：

提前感谢您提供的任何帮助。

Answer 1

我建议使用 Bootstrap Forms 或 jQuery Mobile Selectmenu 使用原生 iOS 选择，或者作为替代 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 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>

使用 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/
• jQueryMobile 的 jsfiddle：https://jsfiddle.net/beaver71/dbs72ujh/

---

更新：

CodePen 游乐场，在 Safari Mobile 上更易于查看：

• 带有 Bootstrap4 和 Twitter Typeahead 的 CodePen：https://s.codepen.io/beaver71/debug/mxdbbB/gareYJXpemZr
• 带有 jQ​​ueryMobile 的 CodePen：https://s.codepen.io/beaver71/debug/zWYOOx/YvAgOPEaDOZA