javascript - 单击时清除文本

Question

我想知道如何在您发布问题时实现堆栈溢出之类的东西:“至少一个标签，例如 (css html asp.net)，最多 5 个标签。

我如何为 html 中的文本输入实现这样的功能，它会部分褪色，但当您键入时，它不会显示，也不会褪色。

我不介意怎么做，只要它有效。

谢谢。

Answer 1

最简单的选择是使用 placeholder 属性:

<input type="text" placeholder="At least one tag, such as 'html', 'asp.net', max five tags." />

JS Fiddle demo .

如果需要交叉兼容性，那么 JavaScript 也是一种选择:

var inputs = document.getElementsByTagName('input');

for (i=0; i<inputs.length; i++){
    if (inputs[i].hasAttribute('data-hint')){
        inputs[i].value = inputs[i].getAttribute('data-hint');
            inputs[i].style.color = '#999';

        inputs[i].onclick = function(){
            this.value = '';
        };
        inputs[i].onblur = function(){
            if (this.value == '' || this.value == this.getAttribute('data-hint')){
                this.value = this.getAttribute('data-hint');
                this.style.color = '#000';
            }
        };
    }
}

JS Fiddle demo .

或者，使用 jQuery:

$('input:text').each(
    function(){
        $(this).val($(this).attr('data-hint'));
            $(this).css('color','#999');
    }).click(
    function(){
        $(this).val('');
            $(this).css('color','#000');
    }).blur(
    function(){
        if ($(this).val() == ''){
            $(this).val($(this).attr('data-hint'));
            $(this).css('color','#999');
        }
    });

JS Fiddle demo .

引用资料:

• Common Input Element Attributes (W3.org) .

原生 JavaScript:

• document.getElementsByTagName() .
• element.onblur .
• element.onfocus .
• element.hasAttribute() .
• element.getAttribute() .
• element.style .

jQuery:

• text-input (:text) selector .
• .each() .
• .val() .
• .css() .
• .attr() .