44

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

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

問題:フィールドをクリックまたはフォーカスすると、点滅するキャレットがまだ表示されます。(少なくとも Win7 の FF と IE8 では)

理想的には、通常どおりに動作し、フォーカス可能ですが、キャレットの点滅がないようにしたいと考えています。

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

4

7 に答える 7

54

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

<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" >
于 2011-03-26T17:35:01.260 に答える
5

html と javascript を使用して実行できます

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

またはjQuery

$(document).on('focus', 'input[readonly]', function () {
        this.blur();
    });
于 2016-05-25T14:36:18.323 に答える
0

onfocus/blur メソッドは、読み取り専用フィールドからカーソルを削除するのに問題なく機能しますが、ブラウザーは次のフィールドに自動的にフォーカスを戻さないため、フォーカスが完全に失われる可能性があります。これは、ユーザーが通常期待するものではありません。したがって、これが必要な場合は、プレーンな JavaScript を使用して次のフィールドに焦点を当てることができますが、次のフィールドを指定する必要があります。

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

「NextField」は、移動するフィールドの名前です。(あるいは、次のフィールドを見つけるための他の手段を提供することもできます)。明らかに、タブ パネルなどの非表示の UI 要素に移動する場合は、これも調整する必要があるため、より複雑になります。

于 2016-10-31T13:22:51.953 に答える