注意:我应该指出，正确的解决方案是仅使用输入的“占位符”属性，但问题仍然存在。
另一个注意事项:因为，正如 Quentin 在下面解释的那样，“value”属性存储默认值，而 input.value IDL 属性存储当前值，我在下面的示例中用来“修复”问题的 JavaScript 是不符合规范的，因为它使用(非 IDL)值属性来存储当前值，而不是默认值。此外，它涉及每次按键时的 DOM 访问，因此它始终只是我遇到的问题的一个有缺陷的演示。它实际上是非常糟糕的代码，永远不应该使用。
CSS 选择器让我觉得我可以在没有任何 JS 的情况下使用充当预览的标签进行输入。我将输入绝对定位在标签内的 0,0 处(显示为内联 block )并给它一个背景“无”，但前提是它的值为“”并且没有聚焦，否则它具有背景色，遮盖了标签文本。
HTML5 spec says that input.value reflects the current value of an input , 但即使 input.value 在您输入输入时更新，使用 input[value=somestring] 选择器的 CSS 仅基于明确输入到文档中的内容或通过 JavaScript setAttribute 方法在 DOM 中设置的内容(也许通过其他 DOM 改变方式)。
I made a jsFiddle representing this.
以防万一，这里有一个包含相关代码的 HTML 文档:
<!doctype html>
<head>
<meta charset="utf-8" />
<title>The CSS Attribute selector behaves all funny</title>
<style>
label {
display: inline-block;
height: 25px;
line-height: 25px;
position: relative;
text-indent: 5px;
min-width: 120px;
}
label input[value=""] {
background: none;
}
label input, label input:focus {
background: #fff;
border: 1px solid #666;
height: 23px;
left: 0px;
padding: 0px;
position: absolute;
text-indent: 5px;
width: 100%;
}
</style>
</head>
<body>
<form method="post">
<p><label>name <input required value=""></label></p>
</form>
<p><button id="js-fixThis">JS PLEASE MAKE IT BETTER</button></p>
<script>
var inputs = document.getElementsByTagName('input');
var jsFixOn = false;
for (i = 0; i < inputs.length; i++) {
if (inputs[i].parentNode.tagName == 'LABEL') { //only inputs inside a label counts as preview inputs according to my CSS
var input = inputs[i];
inputs[i].onkeyup= function () {
if (jsFixOn) input.setAttribute('value', input.value);
};
}
}
document.getElementById('js-fixThis').onclick = function () {
if (jsFixOn) {
this.innerHTML = 'JS PLEASE MAKE IT BETTER';
jsFixOn = false;
} else {
this.innerHTML = 'No, actually, break it again for a moment.';
jsFixOn = true;
}
};
</script>
</body>
</html>
我可能遗漏了什么，但我不知道是什么。
最佳答案
value 属性设置字段的默认值。
value 属性设置字段的当前值。在字段中键入也会设置当前值。
更新当前值不会改变值属性。
属性选择器只匹配属性值。
关于javascript - CSS input[value=whatever] 选择器似乎与 input.value 不匹配。我错过了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15837891/