HTML：カーソルは読み込み専用テキストで表示されますか？

読んでいるだけのテキストボックスがあるとしましょう。

<input type="text" readonly />

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

I suppose I understand why IE/FF opt to show the cursor—so the user knows he or she can still select the value in the field.

それにもかかわらず、明らかにユーザーを混乱させることになり、IE/FFを変更して、カーソルを表示しないようにしたいと考えています。Chromeは readonly

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

22
追加された
ビュー: 36
源
ro ru fr es pt de hi bn ar kk uz be tr uk
私も同じ問題に直面し、私は解決策を得ました。その入力フィールドの pointer-events：none; CSSプロパティを記述します。
追加された 著者 Shrirang Kadale, 源
これを見て、 stackoverflow.com/questions/45738397/…
追加された 著者 Shrirang Kadale, 源

8 答え

私の解決策、nikmd23のjQueryスニペットから、よりうまくいくように見えるblur（）関数

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

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

フォームがフォームの一部であるときに入力が送信されないため、属性「disabled」を使用しないでください

19
追加された
源
onfocus = "this.blur（）"はIE11では動作しないようです
追加された 著者 DivineOps, 源
私は、読み取り専用がどのように使用されたかが重要かどうかを知りたかったのです。 jsfiddle.net/m7saqqL これはそうではないようです違いが生じる・異なる。
追加された 著者 surfmuggle, 源
"readonly"属性を動的に変更する場合は、 $（ 'input'）を使います：focus（function（）{if（$ this）.is（ '[readonly]'））this.blur（）}） ;
追加された 著者 T. Christiansen, 源
両方のフィールドが編集可能ではないので、同じように見えます（無効なフィールドでは、テキストの色が少し異なりますが、濃いグレーですがブラウザに依存する可能性があります）。主な違いは、サーバーにフォームを投稿するときに、「読み取り専用」の入力が行われている間は属性「無効」の入力はまったく送信されません。
追加された 著者 Frank, 源

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

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

I've provided examples of the various input states here: http://jsfiddle.net/hqBsW/1/

もう1つの選択肢は、ユーザが与えられた入力要素にフォーカスしたときにテキスト選択を強制することです。この制御の振る舞いの変更は、入力が制限されているという事実にユーザーをより簡単に導き、最終的な使用例であれば非常に簡単にコピーできるようにします。

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

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

I've updated the example to show this behavior in action: http://jsfiddle.net/hqBsW/2/

7
追加された
源
優れたありがとう。
追加された 著者 Kayote, 源
これは入力が空でない限り有効です。
追加された 著者 Daniel, 源
私はそれを空にして（そしてクリックする）それを微調整しました： jsfiddle.net/hqBsW/78
追加された 著者 Daniel, 源
場合によっては、readonly属性とdisabled属性が必要になることがあります。 HTML5では、無効なフィールドを検証することはできませんが、読み取り専用フィールドを検証することはできます。
追加された 著者 thecoolmacdude, 源

バグのように聞こえる！

類似のバグ（396542）がMozillaで開かれ、カーソル< readonly の入力で点滅する必要がありますが、その動作は間違っていると感じます。点滅するカーソルは、 "ここに入力できます"という意味です。

そのバグにコメントしたり、新しいバグを書き留めたりする必要があります（Mozilla ここ）とMicrosoft ここをクリック）！

その間、 disabled を使用するか、JavaScriptで動作を変更すると、@ nikmd23が示唆しているように、最良の回避策のようです。

6
追加された
源
無効なフィールドに関する1つの注意点は、無効なフィールドがフォームのポストにサーバーにポストされないことです。
追加された 著者 contactmatt, 源
上記のコメントに関しては、隠れた要素と不可能な要素をフォームに入れた汚いハックはもちろんあります。
追加された 著者 Brent, 源
読み取り専用リストボックス/コンボボックスのフィールドを無効にすることは望ましくありません。したがって、それを動かすことなく読み取り専用の状態が必要です。 w3c.github.io/aria/#listbox と w3c.github.io/aria/#combobox
追加された 著者 seangates, 源
その入力フィールドの pointer-events：none; CSSプロパティを記述します。
追加された 著者 Shrirang Kadale, 源

それはhtmlとjavascriptを使って行うことができます

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

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

$(document).on('focus', 'input[readonly]', function() {
        this.blur();
    });
4
追加された
源

タグのスタイル属性を設定することも、クラス属性の値を設定してタグにCSSクラスを追加することもできます。問題を解決するには、カーソルを設定します。詳細はこちらをご覧ください。また、このタグのカーソルを設定するいくつかのルールがある場合、あなたのCSSルールに！importantを追加することができます。 ！重要なこちらについてさらに読むことができます。

2
追加された
源
質問は、マウスカーソルではなくテキストカーソルに関する質問です。
追加された 著者 nikmd23, 源

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

//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
追加された
源

CSS を使用できます：

input {pointer-events:none;}

Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/pointer-events

1
追加された
源
ようこそ。質問に答えるときは、コードに関連する説明を記入してください。あなたのコードを理解していない人もいるかもしれませんし、質問にどのように答えるか分からない人もいます。 良い答えを書く方法を参照してください。
追加された 著者 Nuageux, 源

CSS のみの修正の場合は、次のようにします：

input[readonly] {
  pointer-events: none;
}
0
追加された
源