2016-11-30 171 views
0

我有一個輸入使用bootstrap color picker。輸入恰好處於可滾動模式,當手機屏幕大約在一半以下時,虛擬鍵盤將部分或全部覆蓋顏色選擇器。我已經設法通過只讀輸入來解決這個問題,因爲click事件仍然被觸發並且選擇器仍然出現。不過,我仍然希望讓桌面電腦用戶可以根據自己的需要輸入自己的十六進制顏色。僅在移動設備上進行輸入只讀

是否有任何可靠的方法,使輸入只讀在移動設備上,允許動態加載(輸入將通過jquery的​​或.html()加載,如果POST)?

請注意,我知道我可以通過使用它作爲組件來做到這一點,我只是想知道它是否可能用於未來的引用,儘管我更喜歡當前的僅用於輸入的設計。我非常驚訝,因爲沒有任何關於這個特別是因爲人們had my problem but with the date-picker

enter image description here

+1

你看過[使用媒體查詢](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)嗎? – BDD

+0

不幸的是'readonly'不是CSS屬性,也不能用於CSS,這是我的第一種方法。 – aron9forever

+0

@Fantasterei不知道你的意思,你不能輸入或複製任何東西到只讀輸入。我希望它是桌面上的普通輸入,並且基本上只是在移動設備上進行只讀,以檢查是否有效的顏色是在晚些時候完成的。 – aron9forever

回答

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的點擊,你可以看到,點擊不帶「指針事件的輸入工作:沒有」。