forms - texto - HTML requiere entrada de solo lectura en forma

input solo lectura html

Question

Estoy haciendo una forma. Y en una etiqueta de input está un controlador de eventos OnClick , que abre una ventana emergente, donde puede elegir algunas cosas, y luego autocompleta la etiqueta de input .

Esa etiqueta de entrada también es de readonly , por lo que solo se ingresarán los datos correctos.

Este es el código de la etiqueta de input :

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

Pero el atributo required no funciona en Chrome. Pero el campo es obligatorio.

¿Alguien sabe cómo puedo hacerlo funcionar?

Answer 1

Esto es por diseño. De acuerdo con los borradores oficiales de HTML5 , "si el atributo de readonly se especifica en un elemento de entrada, el elemento está excluido de la validación de la restricción ". (Por ejemplo, sus valores no serán verificados)

Answer 2

readonly campos de readonly no pueden tener el atributo required , ya que generalmente se supone que ya tendrán algún valor.

Answer 3

Creo que esto debería ayudar.

<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>

Answer 4

Tenía el mismo requisito que el tuyo y descubrí una manera fácil de hacerlo. Si desea que también se requiera un campo de "solo lectura" (que no es compatible con HTML básico) y se siente demasiado flojo para agregar validación personalizada, simplemente haga que el campo sea solo de lectura usando jquery de esta manera:

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

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

EDITAR

como @Ed Bayiates apuntó en el comentario, también puedes agregar el controlador de pegar para evitar así:

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

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

Answer 5

Puedes hacer esto para tu plantilla:

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

Y esto para tu js:

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

Para un usuario, la entrada se desactivará y requerirá al mismo tiempo, siempre que tenga una clase css para entrada deshabilitada.

Answer 6

Sí, hay una solución para este problema. Lo encontré desde el sitio https://codepen.io/fxm90/pen/zGogwV .

La solución es la siguiente.

Archivo HTML

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

Archivo CSS

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

Answer 7

Basado en la respuesta @KanakSinghal pero sin bloquear todas las teclas y con el evento de cut bloqueado

$(''.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" />

PD ¿Alguien sabe como evento de cut traducir para copy evento?

Answer 8

  function validateForm() {
    var x = document.forms["myForm"]["test2"].value;
    if (x == "") {
      alert("Name missing!!");
      return false;
    }
  }

  <form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
   <input type="text"  name="test1">
    <input type="text" disabled name="test2">
    <button type="submit">Submit</button>
</form>

Answer 9

Eliminar readonly y usar la función

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

Funciona como lo desea.