web-dev-qa-db-fra.com

HTML requis en lecture seule dans le formulaire

Je fais un formulaire. Et sur une balise input se trouve un gestionnaire d'événements OnClick, qui ouvre une fenêtre contextuelle dans laquelle vous pouvez choisir des éléments, puis qui remplit automatiquement la balise input.

Cette balise d’entrée est également readonly; seules les données correctes seront donc saisies.

C'est le code de la balise input:

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

Mais l'attribut required ne fonctionne pas dans Chrome. Mais le champ est obligatoire.

Est-ce que quelqu'un sait comment je peux le faire fonctionner?

formshtml5google-chromereadonlyrequired-field
29
Mathlight

J'avais les mêmes exigences que les vôtres et j'ai trouvé un moyen facile de le faire ... Si vous souhaitez qu'un champ "en lecture seule" soit également "obligatoire" (ce qui n'est pas pris en charge par le code HTML de base), et vous vous sentez trop paresseux Ajoutez une validation personnalisée, puis faites en sorte que le champ ne soit lu qu'en utilisant jquery de cette façon:

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

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

MODIFIER

comme l'a souligné @Ed Bayiates dans le commentaire, vous pouvez également ajouter un gestionnaire de collage pour prévenir les défauts comme ceci:

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

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

Les champs readonly ne peuvent pas avoir l'attribut required, car il est généralement supposé qu'ils auront déjà une valeur 

31
BenM

C'est par conception. Selon le official HTML5 standard drafts , "si l'attribut readonly est spécifié sur un élément d'entrée, l'élément est interdit de validation de contrainte ." (Par exemple, ses valeurs ne seront pas vérifiées.)

12
user2428118

Supprimer readonly et utiliser la fonction

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

Cela fonctionne comme vous voulez.

9
Parth Patel

Oui, il existe une solution de contournement pour ce problème. Je l'ai trouvé de https://codepen.io/fxm90/pen/zGogwV site.

La solution est la suivante.

Fichier HTML

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

Fichier CSS

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

Required et readonly ne fonctionnent pas ensemble.

Mais readonly peut être remplacé par la construction suivante:

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

1) onkeydown arrêtera la manipulation des données 

2) style="caret-color: transparent !important;" va cacher le curseur.

3) vous pouvez ajouter style="pointer-events: none;" si vous n'avez pas d'événements sur votre entrée, mais ce n'était pas mon cas, car j'ai utilisé un Month Picker. Mon Month picker affiche une boîte de dialogue au clic.

1
Yevgeniy Afanasyev

Basé sur la réponse @KanakSinghal mais sans bloquer toutes les clés et avec l'événement cut bloqué

$('.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. Quelqu'un sait que l'événement cut est traduit par l'événement copy?

1
Anton Shchyrov

Je pense que cela devrait aider.

<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

Si quelqu'un veut le faire uniquement à partir de HTML, cela fonctionne pour moi.

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

Requis et en lecture seule ne fonctionnent pas ensemble .

Bien que vous pouvez faire deux entrées comme ceci:

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

Et remplacez la valeur Two par la valeur qui se trouve dans l’entrée One.

0
Deadpool