输入类型文本中的背景文本

时间:2012-10-25 15:17:06

标签: html css

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

我需要输入文本字段中的背景文本。喜欢:插入你的名字。 当我按下字段插入我的名字时,文字就会消失

好的,谢谢你的解决方案。

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

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

6 个答案:

答案 0 :(得分:33)

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

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

编辑:

我不再推荐将您自己的填充物混合在一起,如下所示。您应该首先使用Modernizr来检测是否需要填充,然后激活适合您需要的填充库。有很多选择的占位符polyfills listed in the Modernizr wiki

ORIGINAL(续):

这是兼容性的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/

更好的垫片方法是在页面加载时运行此脚本,并将占位符放在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/

答案 1 :(得分:2)

HTML5提供placeholder属性来解决此特定问题。有关详细信息,请参阅this linkJSFiddle

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

如果您不使用JQuery,您可以随时提供非HTML5 javascript后备,如here解释,或None jquery placeholder fallback?

答案 2 :(得分:2)

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

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

答案 3 :(得分: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'));
            }
        });
    });

答案 4 :(得分: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/

答案 5 :(得分: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>