javascript - 影子内容有错误的值(value)

Question

在我的网页上，每个输入字段都有阴影内容。据我所知，阴影内容不是我明确插入的，否则我不会在页面上使用它。

我的问题是阴影内容和输入值中的值并不总是匹配；

所以如果我写 html

<input class="value-input" type="number" id="number" value="1" min="1" max="10">

在 safari 中我可以看到阴影内容。有时阴影内容的值与输入值不同。

<input class="value-input" type="number" id="number" value="1" min="1" max="10">
  <div pseudo="-webkit-textfield-decoration-container">
    <div>
      <div contenteditable="plaintext-only">100</div>
    </div>
    <div pseudo="-webkit-inner-spin-button"></div>
  </div>
</input>

这个错误的值不可能是js引起的，因为我在浏览器中禁用js也会出现同样的问题

通过这个，我用 js 读取了错误的值。在这种情况下，控制台日志给我 100 而不是 1。

console.log(document.querySelector('#number').value);

<input class="value-input" type="number" id="number" data-minibasket-quantity-input="" value="1" min="1" max="10">

有谁知道这个数字 100 是如何进入我的阴影内容的，以及为什么阴影内容的值与输入值不同？

我在同一个页面上找到了一个具有这个值的输入(是在该页面上找到的唯一一个这个值)

<input data-range-min="" data-value="2000" onpaste="return false" type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div>2000</div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin">
    </div>
  </div>
</input>

浏览器可能会存储此值并将其设置为下一个输入数字。问题只出现在浏览器后台

Answer 1

看看这个例子:

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

<button class="search">Search (open browser console to see result)</button>

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

https://jsfiddle.net/Lamik/py2h3f47/这正是您要寻找的。