HTML入力領域を読んだら選択可能にする

Question

私は透明な入力領域を持っています。それをクリックすると、輝く境界線が表示され、テキストを編集することができます。私はあなたがそれをクリックしたときにまだ表示されているが、テキストを編集不可能にするために、輝く境界線を取得しようとしています。

<input style='border:none; background:none;' value='TEXT'> 

編集できないのdivなどの入力行為は、あなたがそれをすべてを選択するために、入力エリアをダブルクリックすることはできませんreadonlyかreadonly="readonly"を行い追加と熱烈な境界線は表示されません。テキストを変更せずに入力機能を保持するにはどうすればよいですか？ユーザーは、キーがテキストを入力することで押したときに

Answer 1

あなたは、いくつかのCSSとreadonly属性を使用することができます：選択は正確に何を意味するの

input:focus { 
 
    box-shadow: 0 0 2px 2px #3d94db; 
 
}

<input style='border:none; background:none;' value='TEXT' readonly>

Answer 2

はたぶん、入力フィールド

にデフォルトのプロトコルをデフォルト値を与えます。それをpreventDefault()で上書きすることができます。

今、マウス右クリックイベントを使用してこれを回避できることに気付きました。したがって、別のイベントリスナーが必要ですcontextmenu。今、あなたはもはやこれで不正行為をすることはできません。

var inputField = document.getElementById("input-field"); 
 

 
inputField.addEventListener("keydown", function(event) { 
 
    event.preventDefault(); 
 
}); 
 

 
inputField.addEventListener("contextmenu", function(event) { 
 
    event.preventDefault(); 
 
});

<input type="text" id="input-field" value="This value can be selected" />