モバイルデバイスでのみ入力を読み取り専用にする

Question

bootstrap color pickerを使用する入力があります。入力はスクロール可能なモーダルで起こり、携帯電話の画面の約半分になると、仮想キーボードがカラーセレクタの一部または全部を覆います。私は、クリックイベントがまだトリガされ、セレクタがまだ表示されているので、入力を読み取り専用にすることでこれを修正することができました。しかし、私はまだデスクトップ上のパワーユーザーが望むなら、自分の16進色をタイプするようにしたいと思っています。

モバイルデバイスのみで入力を読み取り専用にする、動的ロードが可能な信頼できる方法はありますか？入力はjqueryの​​または.html()（POSTの場合）によってロードされますか？

コンポーネントとして使用することでこれを行うことができますが、現行の入力専用設計を希望していますが、将来の参照でも可能かどうかを知りたいと思います。私は非常に驚いていたので、特に人々以来、この上に何もなかったhad my problem but with the date-picker。

Answer 1

たぶん、あなたはメディアクエリとクリックスルーのもののいくつかの並べ替えを使用することができます。 クールなことは、それもジャバスクリプトを防ぐことです。

ここに行く：よりよく理解するために

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" />

を私は2回のjavascriptのクリックを追加し、あなたが見ることができるよう、クリックは「ポインタイベントを入力するために動作しません。なし"。