[英]Setting an input element property value to default
On a HTML page i have an input with a value attribute which is changed by some library i use.在 HTML 页面上,我有一个带有值属性的输入,该属性已被我使用的某些库更改。 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?我查看了其他一些问题,例如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):我尝试过的事情(在 FF 中使用 jQuery):
$("#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/根据要求,我做了一个小的最小片段来更好地显示问题: https://jsfiddle.net/codx3vmg/
I managed to find a snippet which does exactly what i desire with a form: https://jsfiddle.net/9h6py8oc/我设法找到了一个片段,它完全符合我想要的形式: 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:在与 OP 进行了长时间的聊天讨论后,为了澄清他们的问题,归结为:
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.input
元素会将value
属性与显示的值同步,并在属性发生变化时保持同步。 Your only options to get the behaviour you want are:获得所需行为的唯一选择是:
value
attribute changes, and sets the value
property accordingly.value
属性变化的突变观察者,并相应地设置value
属性。attributeChangedCallback
for the value
attribute.value
属性实现attributeChangedCallback
。input.readOnly = true;
input.readOnly = true;
reset()
on the form, and re-insert the input at its original location.reset()
,然后将输入重新插入到其原始位置。 This is a bit ugly because it requires the form to actually be added to the DOM, otherwise calling reset()
throws an error.reset()
会抛出错误。 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>
I do not know jquery but here's the code in javascript我不知道 jquery 但这是 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);
}
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="" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.