En una página HTML, tengo una entrada con un atributo de valor que cambia alguna biblioteca que uso. Después de que el usuario cambia el valor de la entrada, se cambia la propiedad del valor.
Después de alguna acción, quiero eliminar la propiedad de valor proporcionada por el usuario y dejar que la entrada muestre el valor proporcionado por el atributo nuevamente y, a partir de ese momento, hacerlo automáticamente (como lo hizo antes de que el usuario ingresara un valor).
Miré algunas otras preguntas como ¿Cuál es la diferencia entre propiedades y atributos en HTML? . Todos brindan una descripción general de la diferencia entre propiedad y atributo, pero nada para eliminar la propiedad completada por el usuario.
Cosas que he probado (con jQuery en FF):
$("#my-input").removeProp('value'); // This has no effect $("#my-input").prop('value', null); // Makes the input empty $("#my-input").prop('value', false); // Sets value to the string "false" $("#my-input").prop('value', undefined); // Makes the input empty $("#my-input").prop('value', $("#my-input").attr('value')); // Sets the correct value however if the external library changes the attribute it doesn't change the prop with itSegún lo solicitado, hice un pequeño fragmento mínimo que muestra mejor la pregunta: https://jsfiddle.net/codx3vmg/
Logré encontrar un fragmento que hace exactamente lo que deseo con un formulario: https://jsfiddle.net/9h6py8oc/
Sin embargo, en mi caso no tengo mis entradas en un formulario. ¿Puedo restablecer una entrada específica (sin un formulario)?
Después de una larga discusión de chat con OP, en un intento de aclarar su problema, esto es lo que se reduce a:
input que nunca ha sido tocado por el usuario sincroniza el atributo de value con el valor mostrado y sigue haciéndolo cada vez que cambia el atributo.Sus únicas opciones para obtener el comportamiento que desea son:
value y establezca la propiedad de value en consecuencia.attributeChangedCallback para el atributo de value .input.readOnly = true;reset() en el formulario y vuelva a insertar la entrada en su ubicación original. Esto es un poco feo porque requiere que el formulario se agregue realmente al DOM; de lo contrario, llamar a reset() genera un error. let c = 1; btn.addEventListener('click', () => { const form = document.createElement('form'); const parent = foo.parentNode; const { nextSibling } = foo; form.style.display = 'inline'; form.appendChild(foo); parent.prepend(form); form.reset(); if (nextSibling) parent.insertBefore(foo, nextSibling) else parent.prepend(foo); form.remove(); }); setInterval(() => foo.setAttribute('value', c++), 1000); <input id="foo" value="0"> <button id="btn">Restore untouched behaviour after editing the input</button>no se jquery pero aqui esta el codigo en javascript
const input = document.querySelector("#my-input"); const defaultValue = "default"; input.addEventListener("keyup", (e) => { const userValue = input.value; input.setAttribute("value", userValue); }); input.addEventListener("blur", (e) => { setTimeout(SetVal, 10000); }); function SetVal() { input.setAttribute("value", defaultValue); }Es posible que desee probar algo como esto. Esto actualiza automáticamente el valor de entrada a su valor predeterminado en el caso de que el usuario no proporcione un valor manualmente. Encuentro esto más limpio y más conveniente.
var input = $("#input1"); input.on("keyup", (event)=>{ input.attr("data-user-value",event.target.value); }); let ctr = 0; setInterval(() => { ctr++; input.val(input.attr("data-user-value") || ctr); }, 1000); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Input</label> <input data-user-value="" id="input1" value="" />