web-dev-qa-db-ja.com

フォーカスされた読み取り専用入力からテキストキャレット/ポインターを削除します

インタラクティブフィールドの外観を削除するために通常のテキストとしてスタイル設定された<input readonly="readonly">を使用していますが、それでも値は表示されます。

これは、ユーザーがフィールドを編集するのを防ぎながら、値を投稿するのに非常に便利です。これは便利な方法であり、いくつかの回避策があることを認識していますが、この方法を使用したいと思います。

問題：フィールドをクリック/フォーカスしても、点滅するキャレットが表示されます。 （少なくともWin7のFFとIE8で）

理想的には、通常のように動作し、焦点を合わせることができますが、キャレットが点滅することはありません。

Javascriptソリューションを歓迎します。

htmlcssformscaret
41
Wesley Murch

私の場合、キャレットなどはありません：

<input type="text" value="test" readonly="readonly" >

これを見てください： http://www.cs.tut.fi/~jkorpela/forms/readonly.html

申し訳ありませんが、今あなたの問題を理解しています。

これを試して：

<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
44
n3on

これをcssで使用できますが、焦点を合わせません：

[readonly='readonly'] {
   pointer-events: none;
}
9
Headache

点滅キャレットを削除するには、css属性をtransparentに指定します

caret-color: transparent;

結果をテストできます here

5
Muhammad Husein

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

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

またはjQuery

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

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

//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');
0
alecellis1985

Onfocus/blurメソッドは正常に動作し、読み取り専用フィールドからカーソルを削除しますが、ブラウザーは次のフィールドに自動的に再フォーカスせず、ユーザーが通常期待するものとはまったく異なるフォーカスを失う可能性があります。したがって、これが必要な場合は、プレーンjavascriptを使用して次のフィールドに焦点を当てることができますが、次のフィールドを指定する必要があります。

<input type="text" name="readonly-field" value="read-only" 
readonly onfocus="this.form.NextField.focus()">

ここで、「NextField」は、ジャンプするフィールドの名前です。 （または、次のフィールドを見つけるためのいくつかの他の手段を提供できます）。明らかに、これはタブパネルなどの非表示UI要素にナビゲートする場合、より複雑になります。これも同様に配置する必要があるからです。

0
andora

簡単！

入力にdisabledを追加するだけで、クリックできなくなります（フォーカスされます）

0
Tusko Trush