注意: これに対する適切な解決策は、入力の「プレースホルダー」属性を使用することですが、問題は依然として残っています。
別の注意点: Quentin が以下で説明しているように、「value」属性にはデフォルト値が格納され、input.value IDL 属性には現在の値が格納されるため、以下の例で問題を「修正」するために使用した JavaScript は準拠していません。 (IDL 以外の) value 属性を使用して、デフォルト値ではなく現在の値を格納するためです。その上、キーを押すたびに 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>
何かが欠けている可能性がありますが、何がわかりません。