Estoy tratando de averiguar si es posible actualizar el siguiente código con la siguiente lógica:
Una vez que se ingresa el texto, haga que el campo sea de solo lectura.
Básicamente, es un campo de firma que queremos bloquear tan pronto como alguien ingrese un valor.
<strong>Logistics Chief:</strong></span></td> <td><span style="font-size: 10pt; font-family: Arial;"><input type="text" style="width: 200px; height: 22px;" value="" fieldname="Field_31"><br>Esto se puede hacer con algo de JavaScript estándar. Aquí hay 2 funciones escritas para bloquear y desbloquear el campo de entrada. Usando el atributo HTML de entrada onfocusout="" accedemos al evento para desenfocar el campo, es decir, dejar el modo de edición del campo. Luego agregué un botón para desbloquearlo nuevamente, ya que el usuario se irritará mucho si logra poner un tipo-o allí y no hay otra alternativa disponible para arreglarlo.
El HTML:
<td> <span style="font-size: 10pt; font-family: Arial;"> <input id="signature_input" onfocusout="lock_signature_field()" type="text" style="width: 200px; height: 22px;" fieldname="Field_31"> <br><br> </span> </td> <td> <button type="button" name="button" onclick="unlock_signature_field()">Edit Signature</button> </td>Aquí está el mismo HTML de nuevo con menos desorden, más copiar y pegar: capaz:
<td> <span> <input id="signature_input" onfocusout="lock_signature_field()" type="text"fieldname="name"> <br><br> </span> </td> <td> <button type="button" name="button" onclick="unlock_signature_field()">Edit Signature</button> </td>El JS (colocado justo antes de en la parte inferior de la página):
<script type="text/javascript"> // set reference to the dom input field const signatureField = document.getElementById("signature_input"); function lock_signature_field() { signatureField.setAttribute('readonly', true); console.log('Element was locked.'); // you can remove this debug-line if you want. } function unlock_signature_field() { signatureField.removeAttribute("readonly"); // we have to remove the attribute alltogether, cause setting it to false, will do nothing in most browsers. console.log('Element was unlocked.'); // you can remove this debug-line if you want. } </script>¡Aquí está en un jsfiddle !