Question

我有一个

<input type="button" id="sf" value="Select field">

和

<select id="rsf"><option value="something">Something</option><option... ... </select>

选择框隐藏，可见性：隐藏，因此无法看到。（它实际上是在按钮后面）

因此，当我单击按钮时，我希望打开本机选择框，可以选择不同的可能性。可能性是可见的，但选择框本身仍然是隐藏的。

它可以在桌面上使用以下代码：

$('#sf').on('touchend click', function() {
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  $('#rsf')[0].dispatchEvent(e);
});

我尝试了一个类似于document.createTouch的方法，以及随后的所有内容，如e.initTouchEvent等等......但没有任何运气....有没有人有解决方案？我之所以这么想，是因为我想触发iOS中的原生选择框UI。（或移动设备上的任何其他操作系统）。

Answer 1

我无法让它像那样工作，所以我将选择框的不透明度设为0，并将其放在按钮后面，并给出按钮"pointer-events: none"。选择框必须与具有宽度和高度的按钮具有相同的尺寸，因此它还具有-webkit-appearance: none;和appearance: none; 还必须确保按钮的z-index高于选择框。

Answer 2

试试这个：如果你正在使用jquery。

  $('#sf').on('touchend click', function() {
        jQuery("#rsf").css({"visibility":"visible"});
        });

在普通的javascript中你可以试试这个：

function myfunction(){
    document.getElementById("rsf").style.visibility='visible'
}


<input type="button" id="sf" value="Select field" onclick="myfunction()">

Answer 3

我设法通过element.focus()（在iOS 8，Cordova应用程序中测试）使其正常工作

所以：

$('select').on('touchend', function(ev) { ev.preventDefault(); ev.target.focus(); });

模拟/触发ios safari中的选择框（可能带有touchend）

3 个答案: