Wie deaktiviere ich einen Eingabetyp = Text?

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.

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" />

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.

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.

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" />

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" />