Javascript/jQuery 区分移动设备和 PC

Question

我在网页上的某些输入上使用日期时间选择器。问题是，当使用移动设备并选择输入时，日期时间选择器和移动设备键盘都会出现。通过在输入上使用“只读”属性可以解决此问题，但会使输入不可编辑。我想要的是在移动设备上保持输入只读，在电脑上保持可编辑。我正在寻找区分移动设备和 PC 的最佳方法。

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

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

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

Answer 1

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

点击事件往往在焦点后触发，因此我选择了焦点:

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);
      })

  })
}