web-dev-qa-db-ja.com

テキスト入力フィールドを無効に見せますが、読み取り専用で動作します

ユーザーには表示できるが編集はできないHTML入力フィールドがあります。フィールドを「無効」としてマークすると、フォームの他の部分と一緒に送信されません。 'readonly'としてマークすると、希望どおりに動作しますが、それでもlooks有効になっています（少なくともChromeでは）。

基本的に、入力フィールドを無効フィールドのようにlookにしたいのですが、behaveを読み取り専用フィールドとして使用します。これは可能ですか？

ありがとう。

編集：また、「読み取り専用」としてマークした場合でも、ダブルクリックして以前にあったものを選択することで、その値を変更することができます。

htmldjangoforms
15
numegil

回避策は次のとおりです。（値を表示するためだけに）必要な場所で入力を無効にし、必要な名前と値を持つ非表示の入力を用意しました。

8
simoncereska

JSFでも同様の問題が発生し、必要な値を永続化するために非表示フィールドが機能しましたが、送信時にフォームの検証に失敗すると、読み取り専用または無効な入力フィールドの値がクリアされます。入力フィールドを技術的に編集可能なままにしておくことでかなりエレガントに機能するように見えるが、フォーカスを受け取るとすぐにぼかしを行うことで編集を妨げる代替ソリューションを見つけました。サーバー側の環境では、JSF（読み取り専用とマークされた入力フィールドからも値を送信しない）で発生したのと同じ問題は発生しない可能性がありますが、状況に応じて同じ手法を使用できる可能性があります。結果として、値を永続化するために個別の非表示フィールドは必要ありません。ただし、2番目の回答と同様に、少なくとも追加のCSSコードがない場合は、フィールドlookを無効にする問題には対処していません。

JSFのコード：

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

これは次のHTMLになります。

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

詳細については、こちらをご覧ください： 検証を通じてJSFビューパラメータを永続化する方法

4
Kevin Rahe

Cssを使用して、好きなように見せることができますが、これはブラウザ/プラットフォーム間で他の無効なフィールドと一致しない場合があります。

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

私はこれが答えられたことを知っていますが、私のCSSの例を挙げたいと思いました。

解決策を探していたときに、入力フィールドのスタイルを設定して無効になっているように見せたので、入力フィールドは常に次のようになりました。

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 を作成したので、皆さんは詳し​​く見ることができます。

Chromeでは見栄えがよく、他のブラウザでは色を少し変更する必要があります。 Firefoxの場合と同様に、色と背景色をなどに変更する必要があります。

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);
2
Devl11