it-swarm.com.de

HTML muss in das Formular schreibgeschützt eingegeben werden

Ich mache ein Formular. Auf einem input-Tag befindet sich ein OnClick-Ereignishandler, der ein Popup-Fenster öffnet, in dem Sie etwas auswählen können, und dann automatisch das input-Tag füllt.

Dieses Eingabe-Tag ist ebenfalls readonly, sodass nur die richtigen Daten eingegeben werden.

Dies ist der Code des input-Tags:

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

Das required-Attribut funktioniert jedoch nicht in Chrome. Aber das Feld ist erforderlich.

Weiß jemand, wie ich es schaffen kann?

29
Mathlight

Ich hatte die gleiche Anforderung wie Ihre und habe einen einfachen Weg gefunden, dies zu tun. Wenn Sie möchten, dass ein "readonly" -Feld auch "erforderlich" ist (was nicht in HTML-Standardformaten unterstützt wird), und Sie sich zu faul fühlen Fügen Sie eine benutzerdefinierte Validierung hinzu, und machen Sie das Feld mit Jquery so schreibgeschützt:

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

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

EDIT

wenn @Ed Bayiates im Kommentar darauf hinweist, können Sie auch einen Einfüge-Handler hinzufügen, um Default wie folgt zu verhindern:

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

<script>
    $(".readonly").on('keydown paste', function(e){
        e.preventDefault();
    });
</script>
72
Kanak Singhal

readonly-Felder können das required-Attribut nicht haben, da im Allgemeinen davon ausgegangen wird, dass sie bereits einen Wert enthalten. 

31
BenM

Dies ist beabsichtigt. Gemäß dem offiziellen HTML5-Standardentwurf "wird das Element für ein Eingabeelement angegeben, wenn das readonly-Attribut angegeben ist - von der Einschränkungsvalidierung gesperrt. (Zum Beispiel werden seine Werte nicht geprüft.)

12
user2428118

Entfernen Sie readonly und verwenden Sie die Funktion

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

Es funktioniert wie Sie möchten.

9
Parth Patel

Ja, es gibt eine Problemumgehung für dieses Problem. Ich habe es von https://codepen.io/fxm90/pen/zGogwV site gefunden.

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;
}
5

Required und readonly arbeiten nicht zusammen.

Readonly kann jedoch 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;" wird den Cursor ausblenden.

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

1

Basierend auf Antwort @KanakSinghal, jedoch ohne alle Schlüssel und mit blockiertem cut-Ereignis

$('.readonly').keydown(function(e) {
  if (e.keyCode === 8 || e.keyCode === 46)  // Backspace & del
    e.preventDefault();
}).on('keypress paste cut', function(e) {
  e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />

P.S. Jemand weiß, wie cut event in copy event übersetzt wird?

1
Anton Shchyrov

Ich denke das sollte helfen.

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

<script>
     function checkIfInputHasVal(){
        if($("#formAfterRederict").val==""){
             alert("formAfterRederict should have a value");
             return false;
        }
     }
</script>
1
scireon

Sie können dies für Ihre Vorlage tun:

<input required onfocus="unselect($event)" class="disabled">

Und das für dein js:

unselect(event){
    event.preventDefault();
    event.currentTarget.blur();
}

Für einen Benutzer ist die Eingabe gleichzeitig deaktiviert und erforderlich, vorausgesetzt, Sie haben eine CSS-Klasse für die deaktivierte Eingabe.

1
Alex Link

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

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

Erforderlich und Readonly arbeiten nicht zusammen .

Obwohl können Sie zwei Eingaben wie folgt vornehmen:

<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible

Und ändern Sie den Wert Two in den Wert, der sich in der Eingabe One befindet.

0
Deadpool