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

Question

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

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

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

澄清这是箭头:

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

Answer 1

我建议使用 Bootstrap Forms或 jQuery Mobile Selectmenu使用 native 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/
• 带有 jQ​​ueryMobile 的 jsfiddle:https://jsfiddle.net/beaver71/dbs72ujh/

---

更新:

CodePen Playground ，在 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