On a HTML page i have an input with a value attribute which is changed by some library i use. After the user changes the value of the input the value property is changed.
After some action i want to remove the user provided value property and let the input show the value provided by the attribute again, and from that point on, do that automatically (like it did before the user ever entered a value).
I looked at some other questions like What is the difference between properties and attributes in HTML? . They all give a descent explanation ofthe difference between property and attribute however nothing to remove the user filled property.
Things i have tried (with jQuery in 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 it
As requested i made a small minimal snippet showing the question better: https://jsfiddle.net/codx3vmg/
I managed to find a snippet which does exactly what i desire with a form: https://jsfiddle.net/9h6py8oc/
However, in my case i do not have my inputs in a form. Can i reset a specific input (without a form)?
After a long chat discussion with OP, in an attempt to clarify their problem, this is what it boiled down to:
input element that has never been touched by the user syncs the value attribute with the displayed value, and keeps doing so whenever the attribute changes.Your only options to get the behaviour you want are:
value attribute changes, and sets the value property accordingly.attributeChangedCallback for the value attribute.input.readOnly = true;reset() on the form, and re-insert the input at its original location. This is a bit ugly because it requires the form to actually be added to the DOM, otherwise calling reset() throws an 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>You might want to try something like this. This automatically updates the input value back to default in the case where a value is not provided manually by the user. I find this cleaner and more convenient.
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="" />I do not know jquery but here's the code in 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);
}