29

我认为这是一个简单的问题，但我不知道如何在谷歌中搜索这个问题

我需要输入文本字段中的背景文本。喜欢：插入你的名字。当我按下该字段以插入我的名字时，文本消失了

好的，感谢您的解决方案。

<input id="textfield" name="textfield" type="text" placeholder="correct" />

现在我得到第二个问题。如何更改占位符的颜色？这是我的文本区域：http: //jsfiddle.net/wy8cP/1/

4

6 回答 6

44

以下是使用 HTML5 获取占位符的方法：

<input id="textfield" name="textfield" type="text" placeholder="enter something" />

编辑：

我不再推荐将你自己的 polyfill 组合在一起，如下所示。您应该首先使用 Modernizr 检测是否需要 polyfill，然后激活适合您需要的 polyfill 库。Modernizr wiki 中列出了很好的占位符 polyfills 的选择。

原件（续）：

这是一个用于兼容性的 polyfill：

<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">

http://jsfiddle.net/q3V4E/1/

更好的 shim 方法是在页面加载时运行此脚本，并将占位符放在 data-placeholder 属性中，因此您的标记如下所示：

<input id="textfield" name="textfield" type="text" data-placeholder="enter something">

你的js看起来像这样：

var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = inputs[i].getAttribute('data-placeholder');
    inputs[i].addEventListener('focus', function() {
        if (this.value == this.getAttribute('data-placeholder')) {
            this.value = '';
        }
    });
    inputs[i].addEventListener('blur', function() {
        if (this.value == '') {
            this.value = this.getAttribute('data-placeholder');
        }
    });
}

http://jsfiddle.net/q3V4E/4/

于 2012-10-25T15:22:15.840 回答
4

HTML5 提供了一个placeholder属性来解决这个特定问题。有关更多信息，请参阅此链接( JSFiddle )

<input type="text" placeholder="insert your name" />

您始终可以提供非 HTML5 javascript 后备，就像这里解释的那样，或者在None jquery placeholder fallback? 如果您不使用 JQuery。

于 2012-10-25T15:19:10.350 回答
2

我认为您正在寻找 HTML5 表单字段占位符... :)

http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

于 2012-10-25T15:19:15.027 回答
1

非 html 5 接受的答案的 jquery 版本：

    var inputs = $("input[type='text']", context);
    $.each(inputs, function (i, obj) {
        $(obj).val($(obj).attr('data-placeholder'));
        $(obj).on('focus', function () {
            if ($(this).val() == $(this).attr('data-placeholder')) {
                $(this).val('');
            }
        });
        $(obj).on('blur', function () {
            if ($(this).val() == '') {
                $(this).val($(this).attr('data-placeholder'));
            }
        });
    });
于 2015-10-14T15:16:44.813 回答
1

改变占位符的颜色可以通过 CSS 实现：

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

来源：https ://css-tricks.com/almanac/selectors/p/placeholder/

于 2017-04-21T18:51:53.777 回答
0

对于非 HTML5，我建议使用不错的 javascript 解决方案，例如 toggleval.js - 这使您不必自己做每个输入字段内联；这将是全球性的。

http://snipplr.com/view/9077/

之后您将调用的脚本将是这样的：

    <script type="text/javascript">
    $(document).ready(function() {
        // Input Box ToggleVal
        $("input[type=text]").toggleVal();
        $("input[type=password]").toggleVal();
    });
    </script>
于 2012-10-25T15:27:46.007 回答