注意:我应该注意,对此的正确解决方案是仅使用输入的“占位符”属性,但问题仍然存在。
另一个注意事项:正如 Quentin 在下面解释的那样,“value”属性存储默认值,而 input.value IDL 属性存储当前值,所以我在下面的示例中用于“修复”问题的 JavaScript 是不合格的,因为它使用(非 IDL)值属性来存储当前值,而不是默认值。此外,它涉及每次按键时的 DOM 访问,因此它始终只是我遇到的问题的一个有缺陷的演示。它实际上是非常糟糕的代码,永远不应该使用。
CSS 选择器让我觉得我可以在没有任何 JS 的情况下使用充当预览的标签进行输入。我绝对将输入定位在标签内的 0,0 处(显示为内联块)并给它一个背景“无”,但前提是它的值是“”并且没有聚焦,否则它有一个背景颜色,它掩盖了标签文本。
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>
我可能会错过一些东西,但我不知道是什么。