Wie kann verhindert werden, dass der Benutzer in das Textfeld eingibt, ohne das Feld zu deaktivieren?

Lesezeit: 4 Minuten

Benutzer-Avatar
Jacob

Ich habe es versucht:

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

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

});

aber es entfernt den eingegebenen Text leicht, nachdem ein Buchstabe eingegeben wurde. Gibt es eine Möglichkeit, den Benutzer daran zu hindern, Text vollständig einzugeben, ohne das Textfeld zu deaktivieren?

  • ist keydown() oder keypress() noch effektiver?

    – verkaufen

    5. August 2011 um 5:06 Uhr


Benutzer-Avatar
Mike Mertsock

Eine Nicht-Javascript-Alternative, die leicht übersehen werden kann: Können Sie die verwenden readonly Attribut statt der disabled Attribut? Es verhindert, dass der Text in der Eingabe bearbeitet wird, aber Browser formatieren die Eingabe anders (es ist weniger wahrscheinlich, dass sie “ausgegraut”) werden, z <input readonly type="text" ...>

  • Das Readonly-Attribut hat keinen Wert, es muss nur in beiden vorhanden sein HTML4.01 und HTML5. Das einzige Mal, wo es einen Wert benötigt, sind gültige XHTML-Dokumente (die im Web extrem selten sind).

    – RobG

    5. August 2011 um 5:20 Uhr

  • Das ist genau richtig RobG, das hätte ich erwähnen sollen. Ich möchte auch erwähnen, dass dieses Attribut für Textarea-Elemente funktionieren sollte, und ich denke, es funktioniert auch für Checkbox-/Radio-Eingaben.

    – Mike Mertsock

    5. August 2011 um 5:22 Uhr

  • Diese Methode hat einen Nachteil. Der Benutzer kann immer noch in das Feld klicken, sodass es so aussieht, als wäre es bearbeitbar. Wenn sie die Rücktaste drücken, um den Inhalt zu entfernen, kann dies die „Zurück“-Funktion des Browsers auslösen. Keine gute Erfahrung.

    – Caltrop

    24. Januar 2013 um 0:59 Uhr


  • Wenn es Bedenken hinsichtlich der Benutzererfahrung gibt oder wenn das Standarddesign eines schreibgeschützten Felds einfach nur hässlich ist, verwenden Sie den Ansatz der progressiven Erweiterung und verwenden Sie CSS, um deutlicher zu machen, dass es nicht bearbeitet werden kann: jsfiddle.net/eBh5N

    – Mike Mertsock

    24. Januar 2013 um 13:07 Uhr


  • Hatte noch nicht einmal von diesem Attribut gehört. Hat mir trotzdem geholfen, danke!

    – Óscar Aguayo

    22. März 2017 um 12:12 Uhr

Wenn Sie nicht möchten, dass das Feld “deaktiviert” oder so aussieht, verwenden Sie einfach Folgendes:

onkeydown="return false;"

Es ist im Grunde dasselbe, was Greengit und Derek gesagt haben, aber etwas kürzer

  • Ich musste e.preventDefault(); im addEventListener

    – Jim Jones

    16. April 2015 um 1:35 Uhr

  • noch kürzer: onkeydown="return false"

    – CodePi

    7. Januar 2016 um 13:24 Uhr

  • Beachten Sie nur, dass dies den Benutzer nicht daran hindert, Text mit der Maus einzufügen.

    – gsanta

    16. April 2016 um 13:50 Uhr

  • Dies ist beispielsweise perfekt, wenn Sie einen Datepicker verwenden, um zu verhindern, dass der Benutzer das Datum eintippt und den Datepicker tatsächlich verwendet. Aber wie @gsanta sagte, sie können immer noch Text einfügen, also stellen Sie einfach sicher, dass Sie auch eine Back-End-Validierung haben 🙂

    – MattiasH

    23. September 2016 um 9:41 Uhr

  • Auf einer ASP.NET-Website führt das Setzen eines Textfelds auf Readonly dazu, dass der Text bei einem Postback verloren geht. Dies ist in solchen Fällen die bessere Lösung.

    – Yass

    1. Dezember 2016 um 13:02 Uhr

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

  • Eigentlich habe ich ein Geburtsdatumsfeld und ich möchte verhindern, dass der Benutzer dieses eingibt, also ist Ihre Antwort für mich GUT !! Wenn ich das Attribut “schreibgeschützt” verwende, kann der Benutzer nicht auf die Eingabe klicken und das DOB-Popup wird angezeigt. Klicken Sie auf die Eingabe.. 🙂 CHEERS !!!! und danke

    – Nein

    10. November 2014 um 6:24 Uhr

  • @treecoder: Gutes Beispiel. Aber was ist, wenn ich eine bedingte Prüfung einschließen möchte, bevor ich die Eingabe verhindere? Zum Beispiel möchte ich die Eingabe aller Zeichen von “a” bis “z”, sowohl in Klein- als auch in Großbuchstaben, und das Symbol “@” verhindern. Alle anderen Symbole und Zahlen sollten erlaubt sein. Wie mache ich das, indem ich speziell die jQuery-Funktion verwende, die Sie oben geschrieben haben?

    – Priyamtheon

    18. Dezember 2021 um 13:08 Uhr

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

Benutzer-Avatar
Mystisch

Wenn Sie verhindern möchten, dass der Benutzer etwas hinzufügt, aber geben Sie ihnen die Möglichkeit, Zeichen zu löschen:

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

Einstellung der maxlength Attribut einer Eingabe zu "0" macht es so, dass der Benutzer keine Inhalte hinzufügen kann, aber trotzdem Inhalte nach Belieben löschen.


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

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

Einstellung der onkeydown zuschreiben return false bewirkt, dass die Eingabe vom Benutzer ignoriert wird Tastendruck darauf, Dadurch wird verhindert, dass sie den Wert ändern oder beeinflussen.

Benutzer-Avatar
qw3n

Eine andere Methode, die je nach Bedarf verwendet werden könnte $('input').onfocus(function(){this.blur()}); Ich denke, so würdest du es schreiben. Ich kenne mich mit jquery nicht aus.

Benutzer-Avatar
Stefan L

Versuchen Sie für eine reine CSS-Lösung die Einstellung pointer-events: none am Eingang.

  • Einzigartige & kreative Lösung

    – Stefan Pham

    1. Mai 2021 um 5:13 Uhr

1186350cookie-checkWie kann verhindert werden, dass der Benutzer in das Textfeld eingibt, ohne das Feld zu deaktivieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy