Wie kann ich eine Texteingabe nicht bearbeiten?

344

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 dazu? Ich habe darüber nachgedacht, 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?

html css html-input Matt Elhotiby
quelle

Antworten:

706 
<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

BoltClock
quelle
4
oder readonly = "readonly", wenn Sie möchten, dass alles XML-y ist, siehe Stephan Mullers Beispiel unten :)
Algy Taylor
1
@Algy Taylor: Ja, das war in der ursprünglichen Antwort, als die ursprüngliche Frage ein eigensinniges [xhtml] -Tag hatte, das alle verrückt machte, welches für welchen Standard gültig war: /
BoltClock
Gibt es eine Möglichkeit, diesen roten Kreis zu entfernen, der entsteht, wenn Sie textareamit dem readonlyAttribut über das Attribut fahren?
Chaudhry Waqas
1
@Shafizadeh - Nein, und das ist gut so. Es wäre schwierig für Browser, sie korrekt zu implementieren, und verwirrend, wenn die Leute sie verstehen würden. Versuchen Sie nicht, ein einfaches Steuerelement zu einer komplexen Aufgabe zu machen. Teilen Sie Ihre Eingabe in Teile auf, wobei jedes Teil einfach ist (ein bearbeitbares Steuerelement, dann ein nicht bearbeitbares HTML-Element, dann ein anderes bearbeitbares Steuerelement).
ToolmakerSteve
1
Überprüfen Sie auch diese Serverseite, wenn der Wert nicht beibehalten werden soll. Im Entwicklertool des Browsers ist es einfach, das Attribut zu entfernen, wodurch das Eingabefeld wieder bearbeitet werden kann.
Kurt Van den Branden
41

Sie können ein readonlyAttribut verwenden, wenn Ihre Eingabe nur gelesen werden soll. Und Sie können disabledAttribute verwenden, wenn die Eingabe angezeigt, aber vollständig deaktiviert werden soll (selbst Verarbeitungssprachen wie PHP können diese nicht lesen).

Ruck
quelle
2
Wenn Sie ein Formular an eine PHP-Datei senden, werden deaktivierte Eingaben nicht gelesen. Es könnte sein, was er meinte.
Carlos2W
3
Was tatsächlich passiert, ist, dass deaktivierte Eingaben NICHT AUCH GESENDET werden, wenn Sie ein Formular senden, was nichts mit PHP, JS oder irgendetwas zu tun hat.
Vasilevich
28

Nur um die verfügbaren Antworten zu vervollständigen:

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

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

Wie benutzt man:

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

Es gibt auch einige Lösungen, um CSS oder JavaScript zu verwenden, wie hier erläutert .

jsidera
quelle
5
Wenn Sie />Ihre Tags schließen möchten, können Sie Ihre Attribute auch auf disabled="disabled"und erweitern readonly="readonly".
BoltClock
5 
<input type="text" value="3" class="field left" readonly>

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

Die Methode zum Festlegen von "schreibgeschützt":

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

um "schreibgeschützt" abzubrechen (Arbeit in jQuery): 

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

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!

Vibhaas Srivastava
quelle
22
Was trägt dies zu der Frage bei, die meine Antwort und Stephans Antwort von vor mehr als 3 Jahren noch nicht getan haben? Sie haben sogar meine Aussage widergespiegelt, dass CSS nicht benötigt wird.
BoltClock
2

Sie müssen nur deaktiviert am Ende hinzufügen

<input type="text" value="3" class="field left" disabled>
Michan
quelle
1
Der Wert wird nicht gesendet, wenn Sie ihn auf deaktiviert setzen. Es könnte das sein, was Sie brauchen, aber es ist nicht das, was gefragt wurde. Als Randnotiz kam ich genau deshalb hierher, weil sich meine "deaktivierte" Eingabe nicht so verhielt, wie ich es erwartet hatte
Balmipour
2

Hinzufügen readonly:

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

Wenn der Wert nicht in einem Formular gesendet werden soll, fügen Sie stattdessen das disabledAttribut hinzu.

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

Es gibt keine Möglichkeit, CSS zu verwenden, das immer funktioniert.

Warum? CSS kann nichts "deaktivieren". Sie können die Anzeige oder Sichtbarkeit weiterhin deaktivieren und verwenden pointer-events: none, pointer-eventsfunktionieren jedoch nicht mit Versionen von IE, die früher als IE 11 veröffentlicht wurden.

Zixuan
quelle
0

Wenn Sie CSS wirklich verwenden möchten , verwenden Sie die folgende Eigenschaft, die das Feld nicht bearbeitbar macht.

pointer-events: none;
saadk
quelle
Oh oh oh. Dies funktioniert in einigen Browsern nicht.
Zixuan