Tengo la siguiente input la que el usuario puede hacer clic primero para habilitar ( button1 ), escribir el nuevo valor deseado y finalmente guardarlo ( button2 ).
<input class="form-control inputUserValue" onkeypress="return contoso.isNumberKey(this, event,3);" data-default_value="10,00" value="10,00" disabled=""> El problema : después de habilitar el campo, el usuario primero debe borrar el contenido de entrada con delete o backspace en el teclado ( incluso cuando el contenido ya está seleccionado ) y luego comenzar a escribir el nuevo valor en el campo de input en blanco. Por lo tanto, el usuario no puede simplemente usar el mouse para seleccionar y simplemente escribir el nuevo valor. Este comportamiento también ocurre en otras secciones del software cuando la input es texto.
La idea es mejorar la experiencia del usuario haciendo posible simplemente escribir el nuevo valor deseado después button1 botón 1, reemplazando el contenido existente y mostrado. El texto/valor existente aún debe mostrarse, pero ya seleccionado y listo para ser reemplazado si el usuario escribe, o el usuario puede querer anular la selección y hacer el mismo ajuste menor en el texto/valor existente.
Probamos onclick="this.select();" cuando button1 botón 1, pero aún así no pudimos escribir el nuevo valor sin delete o backspace primero.
¿Alguien puede ayudar sobre cómo lograr esto?
El HTML se genera y gestiona con JS. La input está dentro de una table-responsive . Nuestro sistema está diseñado para funcionar en Chrome.
Estaba en la forma correcta de usar el método select() , pero primero necesita focus() la entrada:
usrinput.focus(); usrinput.select(); Ejemplo de trabajo: (para text de tipo de entrada)
const usrinput = document.querySelector('input'); document.querySelector('#button1').addEventListener('click', function() { usrinput.disabled = false; usrinput.focus(); usrinput.select(); }); <button id="button1">enable</button> <input type="text" value="10,00" disabled> <button id="button2">Save</button> Ejemplo de trabajo: (para number de tipo de entrada)
const usrinput = document.querySelector('input'); document.querySelector('#button1').addEventListener('click', function() { usrinput.disabled = false; usrinput.focus(); usrinput.select(); }); <button id="button1">enable</button> <input type="number" value="10" disabled> <button id="button2">Save</button>