web-dev-qa-db-ja.com

テキスト入力を編集不可にする方法

だから私はテキスト入力があります

<input type="text" value="3" class="field left">

これが私のCSSです。

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;

これに対する設定やトリックはありますか？私は代わりにラベルを作成することを考えていましたが、スタイリングはどうですか。どうやってそれらを変換できますか。それとももっと良い方法がありますか、それとも唯一の方法ですか？

htmlcsshtml-input
326
Matt Elhotiby
<input type="text" value="3" class="field left" readonly>

スタイリングは必要ありません。

MDNの<input>を参照してください https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

673
BoltClock

属性readonlyを入力に追加できます。

<input type="text" value="3"
       class="field left" readonly="readonly">

より多くの情報： http://www.w3schools.com/tags/att_input_readonly.asp

66
Stephan Muller

入力を読み取り専用にしたい場合は、readonly属性を使用できます。入力を表示したいが完全に無効にしたい場合はdisabled属性を使用できます（PHPのような処理言語でもそれらを読むことができません）。

41
jolt

回答を完成させるためだけに

入力要素は、読み取り専用または無効にすることができます（それらのどれも編集可能ではありませんが、いくつかの違いがあります：フォーカスなど）

良い説明はここにあります：
HTMLフォーム入力フィールドのdisabled = "disabled"とreadonly = "readonly"の違いは何ですか？

使い方：

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

ここ のように、CSSまたはJavaScriptでそれを実現するための解決策もいくつかあります。

26
jsidera
<input type="text" value="3" class="field left" readonly>

あなたは https://www.w3schools.com/tags/att_input_readonly.asp で見ることができました - /

"readonly"を設定する方法：

$("input").attr("readonly", true)

"readonly"をキャンセルする（jQueryで動作する）：

$("input").attr("readonly", false)
4
J. Fan

readonly属性を追加します

<input type="text" value="3" class="field left" readonly="readonly" >

または - 

<input type="text" value="3" class="field left" readonly>

cSSは必要ありません。

4
Vibhaas Srivastava

最後に disabled を追加するだけです。

<input type="text" value="3" class="field left" disabled>
3
Michan

readonlyを追加してください：

<input type="text" value="3" class="field left" readonly>

値をフォームに送信したくない場合は、代わりにdisabled属性を追加してください。

<input type="text" value="3" class="field left" disabled>
1
zixuan