javascript - Chromeブラウザの入力フィールドで読み取り専用属性を使用しながらカーソル移動を有効にする方法

Question

Chrome ブラウザーの入力フィールドで readonly 属性を使用しているときにカーソル移動を有効にする方法は、Firefox で正常に動作します。これは、編集できない入力ボックスの完全な値を観察することです。これを上書きする他の方法は？

Answer 1

Chrome が読み取り専用のテキスト ボックスでカーソルを点滅させないのには十分な理由があります。これは、点滅するカーソルがユーザーがそのコントロールに入力できることを示しているためです。

したがって、その原則に反する場合は、まず UX の観点から判断する価値があります。

本当にそうする場合は、カスタムdata-属性を使用して入力を読み取り専用にすることを指定し、ナビゲーション以外のキー押下を無視することで、読み取り専用の動作を偽造することができます。

var allowedKeys = {
    "37" : "arrow-left",
    "38" : "arrow-up",    
    "39" : "arrow-right",    
    "40" : "arrow-down",
    "9" : "tab",    
    "27" : "esc"        
}

$("input[data-readonly=readonly]").keydown(function(e){
    console.log(e.which);
    if (!allowedKeys[e.which]) {
        e.preventDefault();
    }
});

ここでフィドルを見ることができます。 http://jsfiddle.net/BUcC2/1/

これが標準的な方法で動作する通常の入力コントロールであることを意図している場合は、このメソッドを使用せず、html を表示するための最良の方法のブラウザーの解釈に固執することをお勧めします:)