iOS Safari Mobile禁用以前&下一步为选择输入 [英] iOS Safari Mobile disable previous & next for select input

问题描述

上周五我发现了一个类似的问题，但似乎再也找不到它了。如果有人能够朝正确的方向戳我，那就太好了。

基本上，我在页面上有多个选择菜单。第一个填充负载，第二个填充确定第一个的选择。够简单。然而，在iOS设备上，当您点击select元素时，它会启动iOS滚动条以供您进行选择。如果有人使用本地iOS 以前的或下一个按钮，下面的< select> 输入不会收集先前的选择数据。你必须物理地点击完成，然后启动下一个选择菜单，以使填充的结果准确无误。

一个名为 http://m.lemonfree.com 的网站，它迫使你点击 done 而不是 prev / next ，并且还可以防止您从iOS选择菜单中关闭选择提示。基本上迫使用户选择 done 。

我很想知道他们是如何实现这个功能的。

干杯！

以下是我的代码以防万一：

 < form method =postaction =list.phpclass =striped-bg-inverted> 
< p> 
< label for =make>制作< / label> 
 < option selected>选择制作< /选项> 
<？php foreach（$ usedMakes-> MakeResult as $ MakeResult）{？> 
< option value =<？php echo $ MakeResult-> makeId;？>><？php echo $ MakeResult-> makeName; ？>< /选项> 
<？php}？> 
< / select> 
< / p> 
< p> 
< label for =model> Model< / label> 
 < option value =selected>选择模型< / option> 
< / select> 
< / p> 
< p> 
< button name =submitid =submit>& nbsp; Submit& nbsp;< / button> 
< / p> 
< / form> 
  

我的JavaScript：

  $（＃make）。change（function（）{
 var makeId = $（this）.val（）; 
 $ .ajax（{
 url ：process.inc.php？makeId =+ makeId，
类型：GET，
 contentType：application / json; charset = utf-8，
 dataType：json ，
成功：function（data）{
 var list =; 
 for（i = 0; i< data.length; i ++）{
 var modelId = data [i] .ModelResult.modelId; 
 var modelName = data [i] .ModelResult.modelName; 
 list + =< option value = \+ modelId +\> ;+ modelName +< / option>; 
}; 
 var theSelect = $（＃model）; 
 theSelect.find（option：gt（0） ）.remove（）; 
 theSelect.append（list）; 
} 
}）; 
}）; 
  

解决方案

使用html tabindex = nubmer属性（ http://www.w3schools.com/tags/ att_global_tabindex.asp ）

为了防止输入或选择使用 tabindex = - 1：

 < input tabindex = -  1/> 
  

UPD ：我检查了 http://m.lemonfree.com/ 脚本，并且没有发现任何有关此表单的神奇功能，请参阅下面的代码，这就是他们所拥有的尝试使用 tabindex ）：

  $（'＃PostCode_text'） .click（function（）{
 $（'＃PostCode_text'）。val（''）; 
}）; 
 
 var searchForm = new LemonFree_SearchForm（）; 
 $ b $（'＃Make_select'）。change（function（）{
 searchForm.loadVastModels（this.value，'#Model_select'）; 
}）; 
 
 $ b $（'＃Search_form'）。submit（function（）{
 if（Validate.isZipCode（$（'＃PostCode_text'）。val（）））{ 
返回true; 
} else {
 alert（'请输入一个5位数的邮政编码'）; 
返回false; 
} 
}）; 
  

I had found a similar question regarding this problem last Friday, but cant seem to find it again. If someone could poke me in the right direction, that would be great.

Essentially I have multiple select menu's on a page. The first populates on load, the second populates determining on the selection of the first. Simple enough.

However, in iOS devices, when you tap on the select element, it launches the iOS scroller for you to make a selection. If someone uses the native iOS previous or next buttons, the following <select> input will not collect the previous selection data. You have to physically tap done then launch the next select menu for the populated results to be accurate.

There is a website called http://m.lemonfree.com which forces you to tap done rather than prev/next, and also prevents you from tapping off of the iOS select menu to close the selection prompt. Essentially forcing the user to select done.

I would be very interested in finding out how they achieved this functionality.

Cheers!

Here's my code just in case:

<form method="post" action="list.php" class="striped-bg-inverted">
  <p>
    <label for="make">Make</label>
    <select name="make" id="make" required="required">
        <option selected>Select a Make</option>
      <?php foreach ($usedMakes->MakeResult as $MakeResult) { ?>
        <option value="<?php echo $MakeResult->makeId; ?>"><?php echo $MakeResult->makeName; ?></option>
      <?php } ?>
    </select>
  </p>
  <p>
    <label for="model">Model</label>
    <select name="model" id="model" required="required">
      <option value="" selected>Select a Model</option>
    </select>
  </p>
  <p>
    <button name="submit" id="submit">&nbsp;Submit&nbsp;</button>
  </p>
</form>

My JavaScript:

$("#make").change(function() {
  var makeId = $(this).val();
  $.ajax({
    url: "process.inc.php?makeId=" + makeId,
    type: "GET",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
      var list = "";
      for (i = 0 ; i < data.length; i++) {
        var modelId = data[i].ModelResult.modelId;
        var modelName = data[i].ModelResult.modelName;
        list += "<option value=\"" + modelId + "\">" + modelName + "</option>";
      };
      var theSelect = $("#model");
      theSelect.find("option:gt(0)").remove();
      theSelect.append(list);
    }
  });
});

解决方案

Use html tabindex="nubmer" attribute (http://www.w3schools.com/tags/att_global_tabindex.asp)

To prevent next/previous on input or select use tabindex="-1":

<input tabindex="-1" />

UPD: I've checked http://m.lemonfree.com/ scripts and does not find anything magical about this form, see code below, that's all they have (So just try to use tabindex):

$('#PostCode_text').click(function() {
    $('#PostCode_text').val('');
});

var searchForm = new LemonFree_SearchForm();

$('#Make_select').change(function() {
    searchForm.loadVastModels(this.value, '#Model_select');
});


$('#Search_form').submit(function() {
    if (Validate.isZipCode($('#PostCode_text').val())) {
        return true;
    } else {
        alert('Please enter a 5 digit zip code');
        return false;
    }
});

这篇关于iOS Safari Mobile禁用以前&下一步为选择输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！