将输入元素属性值设置为默认值

Question

在 HTML 页面上，我有一个值属性的输入，它被我使用的某些库更改了。用户更改输入值后，值属性会更改。

经过一些操作我想删除用户提供的值属性并让输入显示 属性 [=37] 提供的值=] 再次，从那时起，自动执行此操作（就像在用户输入值之前所做的那样）。

我查看了其他一些问题，例如 What is the difference between properties and attributes in HTML?。他们都对属性和属性之间的区别进行了下降解释，但是没有删除用户填写的属性.

我尝试过的事情（在 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

编辑 1

根据要求，我做了一个小的最小片段来更好地显示问题： https://jsfiddle.net/codx3vmg/

编辑 2

我设法找到了一个片段，它完全符合我对表单的要求： https://jsfiddle.net/9h6py8oc/

但是，就我而言，我没有在表格中输入。我可以重置特定输入（没有表格）吗？

Answer 1

我不知道 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);
     }

Answer 2

在与 OP 长时间 chat discussion 之后，为了澄清他们的问题，归结为：

用户从未接触过的 input 元素会将 value 属性与显示值同步，并在属性更改时保持同步。
一旦输入接收到它的第一个输入事件，这种同步行为就会丢失。
在表单中，可以使用表单重置来恢复行为。
如果没有表格，目前还没有办法实现。

获得所需行为的唯一选择是：

使用观察 value 属性变化的突变观察者，并相应地设置 value 属性。
使用自定义输入（网络组件）并为 value 属性实施 attributeChangedCallback。
通过将输入设置为只读来防止用户输入：input.readOnly = true;
将输入包装在动态创建的表单元素中，在表单上调用 reset()，并在其原始位置 re-insert 输入。这有点难看，因为它需要将表单实际添加到 DOM，否则调用 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>

Answer 3

您可能想尝试这样的事情。在用户未手动提供值的情况下，这会自动将输入值更新回默认值。我觉得这样更干净、更方便。

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="" />

将输入元素属性值设置为默认值

Setting an input element property value to default

html

javascript

jquery

html-input

编辑 1

编辑 2

将输入元素 属性 值设置为默认值

Setting an input element property value to default

html

javascript

jquery

html-input

编辑 1

编辑 2

将输入元素属性值设置为默认值