CSS input [value = whatever]选择器似乎与input.value不匹配.我想念什么? [英] The CSS input[value=whatever] selector doesn't seem to match against input.value. What am I missing?
问题描述
N.B .:我应该注意到，对此的正确解决方案是仅使用输入的占位符"属性，但问题仍然存在.
N.B.: I should note that the proper solution to this is to just use the 'placeholder' attribute of an input, but the question still stands.
另一个注意事项:由于正如Quentin在下面解释的那样，"value"属性存储 default 值，而input.value IDL属性存储 current 值，因此我在下面的示例中用来修复"该问题的JavaScript不合格，因为它使用(非IDL)value属性存储当前值，而不是默认值.此外，它涉及每次按键的DOM访问，因此它始终只是我所遇到问题的有缺陷的演示.它实际上是非常糟糕的代码，永远不要使用.
Another N.B.: Since, as Quentin explains below, the "value" attribute stores the default value, and the input.value IDL attribute stores the current value, the JavaScript I used to "fix" the problem in my below example is non-conforming, as it uses the (non-IDL) value attribute to store current, rather than default, values. Besides, it involves DOM access on every key press, so it was always just a flawed demo of the problem I was having. It's actually quite terrible code and shouldn't be used ever.
CSS选择器使我认为我可以使用带有标签的输入来充当预览，而无需任何JS.我绝对将输入放置在标签(显示为行内块)内的0,0处，并将其背景设置为无"，但前提是它的值为"且未聚焦，否则具有背景色，使标签文本模糊.
CSS selectors made me think that I could make an input with a label that acts as a preview without any JS. I absolutely position the input at 0,0 inside the label (which is displayed as an inline-block) and give it a background of "none", but only if it's got a value of "" and isn't focussed, otherwise it has a background colour, which obscures the label text.
HTML5规范指出input.value反映输入的当前值，但是即使在输入时更新input.value，使用input [value = somestring]选择器的CSS也仅基于显式输入到文档或集合中的内容应用可以通过JavaScript setAttribute方法(可能还可以通过其他DOM更改方法)在DOM中使用.
The HTML5 spec says that input.value reflects the current value of an input, but even though input.value updates as you type into an input, CSS using the input[value=somestring] selector applies based only on what was explicitly typed into the document, or set in the DOM by the JavaScript setAttribute method (and perhaps by other DOM-altering means).
只是在出现故障的情况下，这是一个包含相关代码的HTML文档:
Just in case that is down, here is an HTML document containing the relevant code:
<!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>
我可能会丢失一些东西，但我不知道什么.
I could be missing something, but I don't know what.
推荐答案
value属性设置字段的默认值.
The value attribute sets the default value for the field.
value属性设置字段的当前值.在该字段中键入也会设置当前值.
The value property sets the current value for the field. Typing in the field also sets the current value.
更新当前值不会更改value属性.
Updating the current value does not change the value attribute.
属性选择器仅与属性值匹配.
Attribute selectors only match on attribute values.
这篇关于CSS input [value = whatever]选择器似乎与input.value不匹配.我想念什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
