1 javascript css dom css-selectors
注意：我应该注意到，正确的解决方案是仅使用输入的“占位符”属性，但问题仍然存在。
另一个注意事项：正如 Quentin 下面所解释的，由于“value”属性存储默认值，而 input.value IDL 属性存储当前值，因此我在下面的示例中用于“修复”问题的 JavaScript 是不合格的，因为它使用（非 IDL）值属性来存储当前值，而不是默认值。此外，它涉及每次按键时的 DOM 访问，因此它始终只是我遇到的问题的有缺陷的演示。它实际上是非常糟糕的代码，永远不应该使用。
CSS 选择器让我觉得我可以使用标签进行输入，充当预览，而无需任何 JS。我绝对将输入定位在标签内的 0,0 处（显示为内联块），并给它一个“none”背景，但前提是它的值为“”并且不聚焦，否则它有背景颜色，遮盖标签文本。
HTML5规范规定 input.value 反映了 input 的当前值，但即使 input.value 在您键入输入时更新，使用 input[value=somestring] 选择器的 CSS 仅根据显式键入的内容应用文档，或通过 JavaScript setAttribute 方法（也可能通过其他 DOM 更改方式）在 DOM 中设置。
为了以防万一，这里有一个包含相关代码的 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>
我可能会错过一些东西，但我不知道是什么。