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

我有一个输入使用bootstrap color picker。输入恰好处于可滚动模式，当手机屏幕大约在一半以下时，虚拟键盘将部分或全部覆盖颜色选择器。我已经设法通过只读输入来解决这个问题，因为click事件仍然被触发并且选择器仍然出现。不过，我仍然希望让桌面电脑用户可以根据自己的需要输入自己的十六进制颜色。仅在移动设备上进行输入只读

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

请注意，我知道我可以通过使用它作为组件来做到这一点，我只是想知道它是否可能用于未来的引用，尽管我更喜欢当前的仅用于输入的设计。我非常惊讶，因为没有任何关于这个特别是因为人们had my problem but with the date-picker。

来源

2016-11-30 aron9forever

你看过[使用媒体查询]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）吗？ – BDD

不幸的是'readonly'不是CSS属性，也不能用于CSS，这是我的第一种方法。 – aron9forever

@Fantasterei不知道你的意思，你不能输入或复制任何东西到只读输入。我希望它是桌面上的普通输入，并且基本上只是在移动设备上进行只读，以检查是否有效的颜色是在晚些时候完成的。 – aron9forever

也许你可以使用媒体查询和某种形式的点击通过的东西。很酷的事情是，它也阻止了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的点击，你可以看到，点击不带“指针事件的输入工作：没有”。

来源

2016-11-30 23:06:56 Fantasterei

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

回答

相关问题