Javascript/jQuery在移动设备和PC之间有所不同

Question

我在网页上的某些输入中使用了日期时间选择器。问题是，当使用移动设备并选择输入时，将同时显示日期时间选取器和移动设备键盘。通过在输入上使用"只读"属性将解决此问题，但会使输入不可编辑。我想要的是将输入在移动设备上保持只读，在 PC 上可编辑。我正在寻找区分移动设备和 PC 的最佳方法。

这是我到目前为止所拥有的：

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    $('.dtpicker').each(function(){
        $(this).prop('readonly', true);
    });
}

欢迎使用任何其他阻止显示默认移动键盘的方法。

Answer 1

Afaik 移动键盘使用焦点事件来显示键盘，并使用模糊来隐藏它。如果在焦点后删除只读属性，则不应弹出键盘。

点击事件往往会在焦点后触发，所以我选择了焦点：

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
  $('.dtpicker').each(function() {
    $(this).attr('readonly', true)
      .on("click", function() {
        $(this).removeAttr('readonly');
      })
      .on("blur", function() {
        $(this).attr('readonly', true);
      })
  })
}