2011-10-12 8 views
10

ユーザーには表示させたいが編集はできないようにするHTML入力フィールドがあります。フィールドを「無効」とマークすると、フォームの残りの部分とともに提出されません。私はそれを '読み取り専用'とマークすると、それは私が望むように動作しますが、まだ(少なくともChromeでは)となっています。テキスト入力フィールドの表示を無効にしても読み取り専用にする

は基本的に、私は、入力フィールドが無効フィールドのように見えますが、読み取り専用フィールドとしてを動作するようにしたいです。これは可能ですか?

ありがとうございました。

編集:また、「読み取り専用」とマークしても、ダブルクリックしてその値を変更することは可能です。

答えて

8

回避策:(値を表示するためだけに)入力が無効になっていて、必要な名前と値の入力が隠されています。

+0

ただし、これはフォームの改ざんを防ぎません。これはすべて見た目だけです。だから[この質問](http://stackoverflow.com/questions/324477/in-a-django-form-how-to-make-a-field-readonly-or-disabled-so-that-it-cannot -be)を改ざんから保護します。 –

+0

はうまく動作します、ありがとう! – numegil

3

これは、ブラウザ/プラットフォームをまたいで無効になっている他のフィールドと一致しない場合がありますが、CSSを使用して見た目を変えることができます。

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/> 
+0

これはすべてのフォーム要素をスタイリングすることで実現できます。 –

+0

私はあなたのための例を追加しました... – neurotik

+0

@CharString、それは本当です。 – neurotik

4

私は隠しフィールドは、私は必要な値を永続化するために働いているJSFと同様の問題があったが、フォームの検証が提出時に失敗した場合は、読み取り専用または無効入力フィールドの値はクリアになるだろう。私は、入力フィールドを技術的に編集可能なままにして、やや優雅に動作するように見えるが、フォーカスを受け取るとすぐにぼかしを行うことで編集を妨げる代替ソリューションを見つけました。 JSFで行ったサーバー側の環境と同じ問題はないかもしれませんが(読んでいるだけの入力フィールドからでも値を送信しません)、同じテクニックを使用することができます。値を維持するために別の隠しフィールドを必要としないことです。しかし、2番目の答えと同様に、フィールドをのように見せてもらうことはできません。少なくとも、CSSコードを追加することなく、を無効にしてください。

JSFのコード:

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" /> 

次のHTMLなった:

<input id="entid" type="text" value="10003" onfocus="blur();" /> 

あなたはここでそれについての詳細を見ることができます:How to persist JSF view parameters through validation

1

私が回答されてこれを知っているが欲しかったです私のCSSの例を挙げてください。

私が解決策を探していたとき、入力フィールドのスタイルをどのようにして無効にしたかのように見えるので、私はいつもこのような入力フィールドを持っていました。 BORDER-で

enter image description here

だから、このCSSコードを使用して、それを解決したなど暗い色を有する&トップを残しました。

input[readonly]{ 
    border-color: darkgrey; 
    border-style: solid; 
    border-width: 1px; 
    background-color: rgb(235, 235, 228); 
    color: rgb(84, 84, 84); 
    padding: 2px 0px; 
} 

jsfiddleを作成してください。皆さんはもう少し詳しく見ることができます。

他のブラウザでは、色を変更する必要があります。 Firefoxの場合と同様に、色や背景色などを変更する必要があります。

background-color: rgb(240, 240, 240); 
color: rgb(109, 109, 109); 
関連する問題