仅在移动设备上进行只读输入

Question

我有一个使用bootstrap color picker的输入。输入恰好是可滚动模式，当它在移动电话上大约一半的屏幕时，虚拟键盘将部分或完全覆盖颜色选择器。我设法通过只读输入来解决这个问题，因为点击事件仍然被触发，选择器仍然出现。但是我仍然希望让台式机上的高级用户可以根据需要输入自己的十六进制颜色。

是否有任何可靠的方法只在移动设备上进行只读操作，允许动态加载（输入将通过jquery＆＃39; s .load()或.html()加载（如果POST）？

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

Answer 1

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

你走了：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

为了更好地理解，我添加了两个javascript点击，正如您所看到的，点击对于＆＃34;指针 - 事件：无＆＃34;输入的输入不起作用。