iOS触摸/点击事件内部的触发器不起作用

2ul0zpep  于 2023-02-10  发布在  iOS
关注(0)|答案(1)|浏览(194)

我正在开发一个移动应用程序,我希望我的用户单击一个图像,然后打开他们设备的原生日期时间选择器应用程序。
NB:这对Android来说很好用--只是对iOS来说不行。
超文本:

<i class="fa fa-clock-o fa-2x" id="datetime_picker"></i>
<label id="new-incident-time-of-incident-label" class="label-datetime" data-field="IncidentDate" style="white-space: nowrap;"></label>
<input id="input" type="datetime-local" style="position: absolute; left: 9999px;"/>

从上面的代码中可以看到,我把输入放到了很远的地方,让它留在DOM中,但不可见(我尝试了其他方法,如display: nonevisibility: hidden,但导致了其他问题)。

label用于在用户单击i-元素时显示在input中选择的值。
所以,也许这看起来有点奇怪,但它在Android设备上运行良好。在iOS上就没那么好了。
这是我的JS:

$("#datetime_picker").on("touchend", () => {

    $("#input").trigger("click");
});

我尝试了click-,touchend-,touchstart-事件的组合,但无济于事。
以下是所有的JS代码,以备参考(你永远不会知道...):

const $input = $("#input");
let initDone = false;

function setValue(date) {
  $input.val(new XDate(date).toString("yyyy-MM-dd'T'hh:mm"));
  $("#new-incident-time-of-incident-label").text(new XDate(date).toString("yyyy-MM-dd'T'hh:mm"));
}

dsIncident.attachEvent("onDataLoaded", () => {
  if (initDone) {
    return;
  }
  initDone = true;
  const date = dsIncident.currentRow("IncidentDate");
  console.log("Initial date set:", date);
  setValue(date);
});

$("#input").on("input", () => {
  const date = new XDate($input.val())[0];
  console.log("Date changed:", date);
  dsIncident.currentRow("IncidentDate", date);
});

$("#datetime_picker").on("touchend", () => {

    $("#input").trigger("click");
});
wlwcrazw

wlwcrazw1#

隐藏或替换输入没有任何区别
好的,但是至少要测试一下,有时候像这样的东西不起作用是因为元素被隐藏或者移动了;浏览器例如可以尝试将弹出位置定向在输入域本身的位置上。
您可以尝试定位输入字段,以便在单击时触发弹出窗口的部分可以位于“时钟”图标后面,该图标本身应该触发此. pointer-events: none(这样点击/点击就可以通过它),以及输入字段本身用opacity: .01之类的东西“隐藏”起来。(不是opacity: 0,它经常会再次触发元素根本无法“交互”的问题。)

相关问题