Wie kann verhindert werden, dass Benutzer ein Textfeld eingeben, ohne das Feld zu deaktivieren?

Ich habe es versucht:

$('input').keyup(function() {

   $(this).attr('val', '');

});

Der eingegebene Text wird jedoch nach der Eingabe eines Buchstabens leicht entfernt. Gibt es eine Möglichkeit, den Benutzer daran zu hindern, Text vollständig einzugeben, ohne das Textfeld zu deaktivieren?

Eine Nicht-Javascript-Alternative, die leicht übersehen werden kann: Können Sie das readonlyAttribut anstelle des disabledAttributs verwenden? Es verhindert, dass der Text in der Eingabe bearbeitet wird, aber Browser gestalten die Eingabe anders (weniger wahrscheinlich, dass sie "grau wird"), z<input readonly type="text" ...>

Wenn Sie nicht möchten, dass das Feld "deaktiviert" oder "smth" aussieht, verwenden Sie einfach Folgendes:

onkeydown="return false;"

Es ist im Grunde das gleiche, was Greengit und Derek sagten, aber etwas kürzer

$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});

$('input').keypress(function(e) {
    e.preventDefault();
});

Wenn Sie den Benutzer daran hindern möchten, etwas hinzuzufügen, ihm aber die Möglichkeit geben möchten, Zeichen zu löschen:

<input value="CAN'T ADD TO THIS" maxlength="0" />

Wenn Sie das maxlengthAttribut einer Eingabe so "0"einstellen, dass der Benutzer keinen Inhalt hinzufügen kann, aber dennoch den gewünschten Inhalt löscht .

Aber wenn Sie möchten, dass es wirklich konstant und unveränderlich ist:

<input value="THIS IS READONLY" onkeydown="return false" />

Wenn Sie das onkeydownAttribut so einstellen , return falsedass die Eingabe den Benutzer ignoriert keypresses, wird verhindert, dass er den Wert ändert oder beeinflusst.

Eine andere Methode, die je nach Bedarf verwendet werden könnte, ist $('input').onfocus(function(){this.blur()}); meiner Meinung nach die Art und Weise, wie Sie sie schreiben würden. Ich beherrsche jquery nicht.

Markup

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

Skript

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}

Ich möchte eine hinzufügen, die auch mit dynamischer Javascript-DOM-Erstellung wie D3 funktioniert, wo es unmöglich ist, Folgendes hinzuzufügen:

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

Um Aktionen für ein HTML-Eingabe-DOM-Element zu verhindern, fügen Sie schreibgeschützt zur Klasse hinzu:

var d = document.getElementById("div1");
d.className += " readonly";

ODER in D3:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

UND zu CSS oder weniger hinzufügen:

.readonly {
  pointer-events: none;
}

Das Schöne an dieser Lösung ist, dass Sie sie dynamisch ein- und ausschalten können, damit sie zum Zeitpunkt der Erstellung in beispielsweise D3 integriert werden kann (mit dem einzelnen Attribut "readonly" nicht möglich).

So entfernen Sie das Element aus der Klasse:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

oder benutze Jquery:

$( "div" ).removeClass( "readonly" )

oder schalten Sie die Klasse um:

$( "div" ).toggleClass( "readonly", addOrRemove );

Nur um vollständig zu sein, viel Glück = ^)

Verwenden Sie einfach onkeydown = "return false" für das Steuerelement-Tag, wie unten gezeigt. Es akzeptiert keine Werte vom Benutzer.

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>

Eine Möglichkeit besteht darin, einen Handler an das inputEreignis zu binden .

Der Vorteil dieses Ansatzes besteht darin, dass das vom Benutzer erwartete Tastaturverhalten (z. B. Tabulator, Bild auf / ab usw.) nicht verhindert wird.

Ein weiterer Vorteil besteht darin, dass auch der Fall behandelt wird, wenn der Eingabewert durch Einfügen von Text über das Kontextmenü geändert wird.

Dieser Ansatz funktioniert am besten, wenn Sie nur die Eingabe leer lassen möchten. Wenn Sie einen bestimmten Wert beibehalten möchten, müssen Sie diesen an einer anderen Stelle (in einem Datenattribut?) Verfolgen, da er beim inputEmpfang des Ereignisses nicht verfügbar ist.

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});

<input type="text" />

Getestet in Safari 10, Firefox 49, Chrome 54, IE 11.

Versuchen Sie für eine reine CSS-Lösung, pointer-events: nonedie Eingabe festzulegen.