Wie deaktiviere ich einen Eingabetyp = Text?

123

Ich möchte das Schreiben in ein Eingabefeld vom Typ textmit JavaScript nach Möglichkeit deaktivieren . Das Eingabefeld wird aus einer Datenbank ausgefüllt. Deshalb möchte ich nicht, dass der Benutzer seinen Wert ändert.

javascript html

— kawtousse
quelle

172

Wenn Sie dies wissen, wenn die Seite gerendert wird, wie es sich anhört, weil die Datenbank einen Wert hat, ist es besser, sie beim Rendern anstelle von JavaScript zu deaktivieren. Fügen Sie dazu einfach das readonlyAttribut (oder disabled, wenn Sie es auch aus der Formularübermittlung entfernen möchten) <input>wie folgt hinzu:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

— Nick Craver
quelle

81

Ich weiß nicht, warum dies Stimmen bekommt, es beantwortet die Frage nicht. Wir hatten Javascript-Antworten erwartet.

— Sophie

3

@Sophie es ist der korrekteste Weg für den Fragesteller, dies basierend auf seiner Situation zu tun. Vielleicht ist eine Titeländerung angebracht.

— Nick Craver

6

Der deaktivierte Modus verhindert Klickereignisse im Eingabefeld, schreibgeschützt nicht. fyi.

— Knutole

Um das Eingabefeld "schreibgeschützt" so zu gestalten, dass es wie das Feld "deaktiviert" aussieht, setzen Sie 'style = "color: grey; background-color: # F0F0F0;"'. (Dies war ein Kommentar zu dieser Antwort )

— Jake Toronto

2

Beachten Sie, dass Browser das Attribut "deaktiviert" oder "schreibgeschützt" ignorieren können und diese Methode nicht verwendet werden sollte, um die Aktualisierung der Daten zuverlässig zu verhindern ... wenn der serverseitige Code, der das Formular verarbeitet, weiterhin akzeptiert wird Ein Wert aus diesem Feld und aktualisieren Sie ihn. Jeder, der über ausreichende Kenntnisse verfügt, um sein eigenes Formular zu erstellen, kann diese "Deaktivierung" umgehen. Dies dient nur der Benutzerfreundlichkeit in einer vertrauenswürdigen Umgebung. Die wirkliche Möglichkeit, dies zu verhindern, ist die serverseitige Logik.

— Aaron Wallentine

205

document.getElementById('foo').disabled = true;

oder

document.getElementById('foo').readOnly = true;

Beachten Sie, dass readOnlysich camelCase befinden sollte, damit es in Firefox (magic) korrekt funktioniert.

Demo: https://jsfiddle.net/L96svw3c/ - erklärt etwas den Unterschied zwischen disabledund readOnly.

— hudolejev
quelle

3

Das hat bei mir funktioniert. Jquery-Version ist $ ('Eingabe'). Prop ('deaktiviert', wahr)

— Daniel Sun Yang

Ich bin sieben Jahre zu spät dran - aber gibt es 2017 einen semantischen Unterschied zwischen diesen beiden?

— Jules

2

Du bist überhaupt nicht zu spät, die Magie ist immer noch da (: Ich erinnere mich nicht, auf welchen Plattformen ich damals getestet habe, aber heute readonly(Kleinbuchstaben) funktioniert in Firefox 52 unter Ubuntu immer noch nicht - sollte ein Kamel sein.

— Hudolejev

Warum funktioniert das bei mir nicht? Ich habe ein inputElement mit erstellt id="gate"und versuche Ihren Code, der für mich nicht zu funktionieren scheint ...

— Voldemorts Zorn

21

Wenn die Daten aus der Datenbank gefüllt wird, sollten Sie überlegen , nicht ein mit <input>Tag , um es anzuzeigen. Sie können es jedoch direkt im Tag deaktivieren:

<input type='text' value='${magic.database.value}' disabled>

Wenn Sie es später mit Javascript deaktivieren müssen, können Sie das Attribut "disabled" festlegen:

document.getElementById('theInput').disabled = true;

Der Grund, warum ich vorschlage, den Wert nicht als anzuzeigen, <input>ist, dass er meiner Erfahrung nach Layoutprobleme verursacht. Wenn der Text lang ist, muss <input>der Benutzer in einem versuchen, den Text zu scrollen, was normale Leute nicht vermuten würden. Wenn Sie es einfach in ein <span>oder etwas fallen lassen, haben Sie mehr Flexibilität beim Styling.

— Spitze
quelle

3

Denken Sie daran, dass deaktiviert Text in einigen Browsern fast unlesbar machen kann. Mit dem readonly-Attribut sind Sie vielleicht besser dran, z. B. <input type = "text" value = "foo" readonly>

— Olly Hodgson,

7

Sie können auch per jquery:

$('#foo')[0].disabled = true;

Arbeitsbeispiel:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Erweitern Sie das Snippet

— Chani Poz
quelle

1

@Chani Poz Sie rufen den nativen js-Setter für ein jquery-Objekt auf, was zu einem Fehler führen wird. $ ('# foo') [0] .disabled = true oder $ ('# foo'). get (0) .disabled = true erledigt die Arbeit

— Arek Kostrzeba

6

Holen Sie sich einen Verweis auf Ihr Eingabefeld, wie Sie möchten (z. B. document.getElementById('mytextbox')), und setzen Sie dessen readonlyEigenschaft auf true:

myInputBox.readonly = true;

Alternativ können Sie diese Eigenschaft einfach inline hinzufügen (kein JavaScript erforderlich):

<input type="text" value="from db" readonly="readonly" />

— Roatin Marth
quelle

Wenn Sie HTML schreiben (im Gegensatz zu XHTML), wäre dies <input type = "text" value = "from db" readonly>

— Olly Hodgson