阴影内容值错误

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/这正是你要找的。