HTML erforderte schreibgeschützte Eingabe im Formular

Lesezeit: 4 Minuten

Benutzer-Avatar
Mathlight

Ich mache ein Formular. Und auf einem input Tag ist ein OnClick Event-Handler, der ein Popup öffnet, in dem Sie etwas auswählen können, und das dann automatisch ausgefüllt wird input Schild.

Das Input-Tag ist auch readonlysodass nur richtige Daten eingegeben werden.

Dies ist der Code der input Schild:

<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();"  />

Aber die required Attribut funktioniert nicht in Chrome. Aber das Feld ist erforderlich.

Weiß jemand, wie ich es zum Laufen bringen kann?

  • required ist ein neues Attribut in HTML5 – es wird noch nicht in allen Browsern unterstützt

    – Muleskinner

    8. Oktober 2012 um 8:22 Uhr


  • Sie sollten Ihre Frage mit dem HTML5-Tag und dem Chrome-Tag markieren

    – Muleskinner

    8. Oktober 2012 um 8:28 Uhr


  • @Muleskinner: Es wird von den stabilen Versionen von Firefox, Chrome und Opera unterstützt: caniuse.com/#search=erforderlich

    – Mixer

    8. Oktober 2012 um 8:30 Uhr

  • @Blender, danke für die Website, ich habe sie sofort mit einem Lesezeichen versehen 😀

    – Mathlight

    8. Oktober 2012 um 8:36 Uhr

Benutzer-Avatar
Kanak Singhal

Ich hatte die gleiche Anforderung wie Sie und ich habe einen einfachen Weg gefunden, dies zu tun. Wenn Sie möchten, dass ein “schreibgeschütztes” Feld auch “erforderlich” ist (was von grundlegendem HTML nicht unterstützt wird) und Sie sich zu faul fühlen, eine benutzerdefinierte Validierung hinzuzufügen, dann machen Sie das Feld einfach mit jQuery auf diese Weise schreibgeschützt:

VERBESSERT

Formulieren Sie die Vorschläge in Kommentaren

<input type="text" class="readonly" autocomplete="off" required />

<script>
    $(".readonly").on('keydown paste focus mousedown', function(e){
        if(e.keyCode != 9) // ignore tab
            e.preventDefault();
    });
</script>

Credits: @Ed Bayiates, @Anton Shchyrov, @appel, @Edhrendal, @Peter Lenjo

ORIGINAL

<input type="text" class="readonly" required />

<script>
    $(".readonly").keydown(function(e){
        e.preventDefault();
    });
</script>

  • Ich habe auch einen Paste-Handler hinzugefügt, um PreventDefault zu verhindern, und die Lösung war vollständig!

    – Ed Bayiates

    10. September 2015 um 20:11 Uhr

  • Gute Antwort, aber seine blockiert ALLE Tasten (einschließlich Tab, Links, Rechts) und nicht gesperrt Cut Veranstaltung. Ich habe eine eigene Version geschrieben 🙂

    – Anton Shchyrov

    18. April 2017 um 21:27 Uhr

  • Danke vielmals! @Kanak deine Antwort war nützlich für mich.

    – Carmoreno

    16. Mai 2017 um 20:44 Uhr

  • Die Lösung für die Zahleneingabe ist das Hinzufügen eines „Mousedown“-Handlers.

    – Apfel

    15. Dezember 2017 um 18:17 Uhr

  • Ich habe den Fokus-Handler hinzugefügt, um eine automatische Vervollständigung und das Anzeigen des Cursors zu vermeiden.

    – Peter Lenjo

    1. Februar 2020 um 13:37 Uhr

readonly Felder können nicht die haben required Attribut, da allgemein davon ausgegangen wird, dass sie bereits einen gewissen Wert haben.

  • Und du kennst keinen Workaround? Weil ich es überprüfen möchte, bevor das Formular wirklich abgeschickt wird …

    – Mathlight

    8. Oktober 2012 um 8:27 Uhr

  • @yogi, wenn Sie die Frage richtig gelesen haben, dann haben Sie gesehen, dass ich einen OnClick-Ereignishandler verwende, der etwas öffnet, das einen Wert zurücksendet …

    – Mathlight

    8. Oktober 2012 um 8:29 Uhr

  • Nun, abgesehen davon, dass Sie einige Validierungen vornehmen, um sicherzustellen, dass der Wert nur einer der Werte ist, die Sie mit Ihrem JS eingeben, gibt es wenig, was Sie tun können. Außerdem würde ich die Verwendung empfehlen onfocusfür die Verwendung von Registerkarten in Ihrem Formular.

    – BenM

    8. Oktober 2012 um 8:32 Uhr

  • @yogi mit einem Datepicker-Modal . . .

    – ajbraus

    21. Juli 2014 um 17:27 Uhr

  • Ja, Datepicker Modal ist der offensichtliche Anwendungsfall, readonly denn nur so kann verhindert werden, dass die Tastatur eines Mobilgeräts unnötig auftaucht.

    – Rob Grant

    5. Juni 2015 um 10:13 Uhr

Entfernen readonly und Funktion nutzen

<input type="text" name="name" id="id" required onkeypress="return false;" />

Es funktioniert wie du willst.

  • kann nicht mit dem Löschen von Inhalten umgehen, wenn auf die Rücktaste geklickt wurde.

    – Sanjoy Kanrar

    23. Juni 2018 um 16:02 Uhr

  • Gibt es eine Möglichkeit, den Cursor loszuwerden? vielleicht auf etwas anderes konzentrieren? ist es möglich ?

    – thanos.a

    13. April 2020 um 21:39 Uhr

Benutzer-Avatar
Jewgenij Afanasjew

Required und readonly arbeiten nicht zusammen.

Aber readonly kann durch folgende Konstruktion ersetzt werden:

     <input     type="text"
                onkeydown="return false;"
                style="caret-color: transparent !important;"                   
                required>

1) onkeydown stoppt die Manipulation mit Daten

2) style="caret-color: transparent !important;" blendet den Cursor aus.

3) Sie können hinzufügen style="pointer-events: none;" wenn Sie keine Ereignisse auf Ihrer Eingabe haben, aber das war nicht mein Fall, weil ich a verwendet habe Month Picker. Mein Month picker zeigt beim Klicken einen Dialog an.

Benutzer-Avatar
Benutzer2428118

Dies ist beabsichtigt. Laut dem offizielle HTML5-Standardentwürfe„Wenn die readonly Attribut auf einem Eingabeelement angegeben ist, ist das Element von der Constraint-Validierung ausgeschlossen.” (zB werden seine Werte nicht überprüft.)

Benutzer-Avatar
Udara Seneviratne

Ja, es gibt eine Problemumgehung für dieses Problem. Ich fand es von https://codepen.io/fxm90/pen/zGogwV Seite? ˅.

Lösung ist wie folgt.

HTML-Datei

<form>
  <input type="text" value="" required data-readonly />
  <input type="submit" value="Submit" />
</form>

CSS-Datei

input[data-readonly] {
  pointer-events: none;
}

Benutzer-Avatar
Schabbir

Wenn jemand es nur aus HTML machen will, funktioniert das für mich.

<input type="text" onkeydown="event.preventDefault()" required />

1282280cookie-checkHTML erforderte schreibgeschützte Eingabe im Formular

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

Privacy policy