0

注意:我应该注意,对此的正确解决方案是仅使用输入的“占位符”属性,但问题仍然存在。

另一个注意事项:正如 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 中设置。

我做了一个代表这个的jsFiddle。

以防万一,这是一个包含相关代码的 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>

我可能会错过一些东西,但我不知道是什么。

4

2 回答 2

3

value 属性设置字段的默认值。

value 属性设置字段的当前值。在字段中键入也会设置当前值。

更新当前值不会更改 value 属性。

属性选择器仅匹配属性值。

于 2013-04-05T15:35:08.280 回答
1

有用于匹配输入元素的许多属性的新伪类

  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required

未设置任何值的必需元素将与:invalid. 如果您坚持使用该值而不是占位符,您可以简单地添加一个模式或一个 customValidity 函数来强制您的初始值被视为无效。

于 2013-04-05T15:45:26.937 回答