HTML 输入表单中的更改不会影响 DOM答案

【问题标题】：The change In the HTML Input Form Doesn't Affect the DOMHTML 输入表单中的更改不会影响 DOM
【发布时间】：2020-01-08 03:10:12
【问题描述】：

我需要了解 Ebay 如何处理它的产品表单，以便我可以将其应用到我的应用程序中。这对于表单数据的安全性至关重要。事情是这样的；

在 Ebay 上，当您点击产品时，它的容量、条件、数量等属性会出现在哪里，并且（在我的情况下）您更改数量并将其添加到购物车中，例如当您输入 10 作为数量，但默认值为 1，DOM 不会更改为 10，但仍然有 10 件商品进入购物车。此外，如果您在 DOM 本身通过浏览器检查器（比如设为 10），默认数量 1 不会更改为 10。因此，发生的唯一情况是；您输入数量，即使 DOM 没有改变，应用程序仍然知道所需的数量。（请注意，其他标签如 h3 可以通过 DOM Inspector 进行操作，即立即应用更改）

我需要帮助弄清楚这是如何完成的。提前谢谢你。

【问题讨论】：

标签： html forms dom web-inspector

【解决方案1】：

对value property 所做的任何更改都不会更新为输入的value attribute。

对输入的value attribute 所做的任何更改都将更新为输入的value property，直到value property 不脏（即没有从其他地方更改）。一旦输入的value property 变脏，对value attribute 所做的任何更改都不会更新输入的value property。

您可以使用Element.value 设置或获取输入的value property。

您可以使用Element.getProperty('value') 获取和Element.setProperty('value') 设置输入的value attribute。

【讨论】：

好的，但我需要弄清楚的是，他们如何设法避免从我们通过右键单击并单击“检查元素”选项打开的 DOM 树中直观地更改元素值。例如，我可以通过这种方式更改 stackoverflow 的 sarch bar 的值。在 Ebay 上发生的情况是，即使您更改了值，它在表单上视觉上保持不变，但在这里搜索栏输入值会立即更改为我输入的值。
@JaqenH'gaar 在控制台中运行此Element.value = 'something' 或简单地在输入中手动输入一些内容，然后尝试在stackoverflow 中再次从属性中更改输入值
我刚刚意识到，这不仅仅是初始渲染，值属性跟随值属性直到它变脏，更新答案
非常感谢您的澄清。现在一切都说得通了

【解决方案2】：

据我所知，一旦您在浏览器加载页面后手动更改 input 字段中的值，您对 DOM 的更改不会更改输入字段。如果我的观察是正确的，那么可以使用JQuery 更改和恢复该值。因此，如果我是对的，以下内容可能会有所帮助：

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      var val = document.getElementById('fname');
      s = val.value;
      val.value = "4";
      val.value = s;
    });
    </script>
    </head>
    <body>

     <form action="/action_page.php">
      First name: <input type="text" name="fname" value="John" id="fname"><br>
      Last name: <input type="text" name="lname" value="Doe"><br>
      <input type="submit" value="Submit form">
    </form>

    </body>
    </html>

我不确定它是否是这样做的。

【讨论】：