在我的网页上,每个输入字段都有阴影内容。据我所知,阴影内容不是我明确插入的,否则我不会在页面上使用它。
我的问题是阴影内容和输入值中的值并不总是匹配;
所以如果我写 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>
浏览器可能会存储此值并将其设置为下一个输入数字。 问题只出现在浏览器后台
最佳答案
看看这个例子:
<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/ 这正是您要寻找的。p>
关于javascript - 影子内容有错误的值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68576298/