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

Question

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

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

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

Answer 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。

Answer 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>

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

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

The change In the HTML Input Form Doesn't Affect the DOM

html

forms

dom

web-inspector