web-dev-qa-db-ja.com

HTML：読み取り専用の入力テキストにカーソルが表示されていますか？

次のような読み取り専用のテキストボックスがあるとします。

<input type="text" readonly />

IE 9 and FF 4、このフィールドをクリックすると、フィールドに（点滅しない）カーソルが表示されます。ただし、Chromeでは、カーソルは表示されません。 http://jsfiddle.net/hqBsW/ ）

IE/FFがカーソルを表示することを選択する理由を理解していると思うので、ユーザーはフィールドの値を選択できることを知っています。

それにもかかわらず、明らかにユーザーを混乱させるため、IEを変更してカーソルを表示しないようにします。Chromeはreadonlyフィールドに対して行います。

これを行う方法はありますか？

htmlinputreadonly
23
user979672

バグのようですね！

同様のバグ（396542） Mozillaで開いており、カーソルshouldがreadonlyで点滅する入力—しかし、その動作は間違っていると感じます。点滅するカーソルは、「ここに入力できます」という意味です。

そのバグについてコメントするか、新しいバグを提出してください（Mozilla here およびMicrosoft here ）！

それまでの間、@ nikmd23が示唆したように、disabledを使用するか、JavaScriptで動作を変更するのが最善の回避策のようです。

7
s4y

私の解決策は、nikmd23のjQueryスニペットからですが、blur（）関数を使用するとうまくいくようです

$('input[readonly]').focus(function(){
    this.blur();
});

ここの例：http://jsfiddle.net/eAZa2/

入力がフォームの一部である場合、入力は送信されないため、属性「無効」を使用しないでください。

19
Frank

readonly属性をdisabledに変更すると、入力ボックスをクリックすることができなくなり、カーソルが表示されなくなります。

ただし、ブラウザによっては、テキストを選択できない場合もあります。

ここにさまざまな入力状態の例を示しました。 http://jsfiddle.net/hqBsW/1/

別の方法として、ユーザーが特定の入力要素に焦点を合わせたときにテキスト選択を強制することができます。この制御動作の変更により、ユーザーは入力が制限されているという事実をより簡単に把握でき、それが最終ユースケースである場合に非常に簡単にコピーできます。

JQueryを使用して、次のような選択コードを記述します。

$('input[readonly]').focus(function(){
    this.select();
});

この動作を実際に示すために例を更新しました： http://jsfiddle.net/hqBsW/2/

7
nikmd23

Htmlとjavascriptを使用して行うことができます

<input type="text" onfocus="this.blur()" readonly >

またはjQueryを使用してグローバルに

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });
5
Kld

CSSのみを修正するには、次を使用します。

input[readonly] {
  pointer-events: none;
}
2
Mohammed Erraysy

私がこれを見つけた唯一の方法は

//FIREFOX
$('INPUT_SELECTOR').focus(function () {
                $(this).blur();
            });
//INTERNET Explorer
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
                $(this).blur();
            });
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');
1
alecellis1985

cssを使用できます：

input {pointer-events:none;}

リファレンス： https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

0
Laxman Paikaray