Question

我有一个具有输入字段的表单：

<input type="text" class="my-form" placeholder="0" maxlength="10" value="50">

当前值是50。当我手动（使用键盘）输入其他值时，例如：20并按TAB键或单击网页上的任意位置，将处理该值（例如：它可以乘以2，这会在按下提交按钮之前发生）。效果很好。

当我尝试使用JS更改值时（在控制台中）：

document.querySelector('.my-form').value = 20;

输入字段框已更新为20（到目前为止非常好），但是此后，当我手动按TAB或单击网站上的任何位置时，什么都没有发生（与我手动输入值不同），当我手动单击输入时字段中，该值从20变为50，就好像JS仍然具有旧值一样，这使我有理由相信我使用JS更改为新值（20）只是显示而不是由JS存储。

摘要：输入值仅显示在文本字段中，而不是JS维护/保留/保留的值，当我单击“提交”时，它将更改为旧值并提交，而不是新值。

Answer 1

检查您的其他代码，表明您的问题是它们的副作用。

此演示有效：

function setValue(){
  document.querySelector('.my-form').value = 20;
}

function getValue(){
  console.log(document.querySelector('.my-form').value);
}

document.querySelector('#btnSet').addEventListener('click',setValue,false);

<form onsubmit="getValue(); return false;">
   <input type="text" class="my-form" placeholder="0" maxlength="10" value="50">
   <input type="button" id="btnSet" value="set 20 Unit">
   <input type="submit" id="btnSubmit" value="Submit">
</form>

用户输入值未使用JS保留在表单输入字段中

1 个答案: