webentwicklung-frage-antwort-db.com.de

Wie mache ich eine Texteingabe nicht bearbeitbar?

Also habe ich eine Texteingabe

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

Hier ist mein CSS dafür

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;

Gibt es eine Einstellung oder einen Trick, ich dachte darüber nach, stattdessen ein Label zu machen, aber wie wäre es mit dem Styling. Wie konvertiere ich sie und gibt es einen besseren Weg oder ist das der einzige Weg?

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

Kein Styling notwendig.

Siehe <input> auf MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

679
BoltClock

Sie können das Attribut readonly zur Eingabe hinzufügen:

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

Weitere Informationen: http://www.w3schools.com/tags/att_input_readonly.asp

67
Stephan Muller

Sie können das readonly -Attribut verwenden, wenn Ihre Eingabe nur gelesen werden soll. Sie können auch das disabled -Attribut verwenden, wenn die Eingabe angezeigt werden soll, diese jedoch vollständig deaktiviert ist (selbst Sprachen wie PHP können diese nicht lesen).

41
jolt

Nur um die Antworten zu vervollständigen:

Ein Eingabeelement kann entweder schreibgeschützt oder deaktiviert sein (keines kann bearbeitet werden, es gibt jedoch einige Unterschiede: focus, ...)

Eine gute Erklärung finden Sie hier:
Was ist der Unterschied zwischen disabled = "disabled" und readonly = "readonly" für HTML-Formulareingabefelder?

Wie benutzt man:

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

Es gibt auch einige Lösungen, um es durch CSS oder JavaScript zu machen, wie erklärt hier .

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

Sie können dies in https://www.w3schools.com/tags/att_input_readonly.asp sehen

Die Methode, um "readonly" zu setzen:

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

"readonly" abbrechen (in jQuery arbeiten):

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

fügen Sie das schreibgeschützte Attribut hinzu

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

oder -

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

kein CSS benötigt!

3
Vibhaas Srivastava

readonly hinzufügen:

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

Wenn der Wert nicht in einem Formular übermittelt werden soll, fügen Sie stattdessen das Attribut disabled hinzu.

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

Es gibt keine Möglichkeit, CSS zu verwenden, die dies immer ermöglicht.

Warum? CSS kann nichts "deaktivieren". Sie können weiterhin die Anzeige oder Sichtbarkeit deaktivieren und pointer-events: none verwenden, aber pointer-events funktioniert nicht bei Versionen von IE, die vor IE 11 herausgekommen sind.

2
zixuan

sie müssen nur disabled am Ende hinzufügen

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