仅在移动设备上将输入设为只读答案

【问题标题】：Make input readonly on mobile devices only仅在移动设备上将输入设为只读
【发布时间】：2016-11-30 22:05:25
【问题描述】：

我有一个使用bootstrap color picker 的输入。输入恰好是可滚动的模式，当它在手机屏幕的一半以下时，虚拟键盘将部分或完全覆盖颜色选择器。我已经设法通过将输入设为只读来解决此问题，因为单击事件仍然被触发并且选择器仍然出现。但是，如果他们愿意，我仍然想让台式机上的高级用户键入他们自己的十六进制颜色。

是否有任何可靠的方法可以使输入仅在移动设备上只读，允许动态加载（输入将通过 jquery 的 .load() 或 .html() 如果 POST 加载）？

请注意，我知道我可以通过将它用作组件来做到这一点，我只是想知道它是否可能以供将来参考，尽管我更喜欢当前的仅输入设计。我很惊讶在 SO 上没有任何内容，尤其是因为人们 had my problem but with the date-picker。

【问题讨论】：

你看过using media queries吗？
不幸的是，readonly 不是 CSS 属性，也不能与 CSS 一起应用，这是我的第一个方法。
@Fantasterei 不确定您的意思，您无法将任何内容键入或复制到只读输入中。我希望它是桌面上的正常输入，基本上是移动设备上的只读输入，稍后会检查它是否是有效的颜色。
@aron9forever：看看我的帖子。

标签： javascript html css twitter-bootstrap

【解决方案1】：

也许您可以使用媒体查询和某种点击方式。很酷的是，它还可以防止 javascript。

给你：

document.getElementById('test1').addEventListener('click', function() {
    alert('1');
});

document.getElementById('test2').addEventListener('click', function() {
    alert('1');
});

input[type="text"] {
    pointer-events: none;
}

<input type="text" value="It's just a test 1" id="test1" />
<input type="search" value="It's just a test 2" id="test2" />

为了更好地理解，我添加了两个 javascript 点击，如您所见，点击不适用于带有“pointer-event:none”的输入。

【讨论】：