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

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>