Question

我想在输入字段text和textarea中添加有用的文字（在没有任何框架使用的javascript中），但是不知道它叫什么

me.com http://i48.tinypic.com/rrhvye.png

因为它在me.com中使用，但我不想提交用作帮助者的值。

抱歉英文不好。

谢谢。

Answer 1

最简单的方法：

<input type=text placeholder="Member name">

Answer 2

试试这个：

<input type="text" name="member_name" value="Member Name" onFocus="field_focus(this, 'Member Name');" onblur="field_blur(this, 'Member Name');" />

当然，您想为密码字段创建输入类型密码，因此这对密码文本框没有用。

如果您要处理多个字段，也可以将其包装在函数中：

<script type="text/javascript">
  function field_focus(field, text)
  {
    if(field.value == text)
    {
      field.value = '';
    }
  }

  function field_blur(field, text)
  {
    if(field.value == '')
    {
      field.value = text;
    }
  }

</script>

Answer 3

我发现解决此问题的最佳方法是使用<label>并将其放在输入区域上。这给你：

更多审美自由
保持页面语义
允许您优雅地降级
通过提交工具提示作为输入值或不必担心管理该问题不会导致问题

这是一个vanilla版本，因为你没有要求框架。标记不需要更改，但您可能需要调整CSS以满足您的需求。

HTML：

<html>
<head>
    <style>
    label.magiclabel {
        position: absolute;
        padding: 2px;
    }
    label.magiclabel,
    input.magiclabel {
        width: 250px;
    }
    .hidden { display: none; }
    </style>

    <noscript>
        <style>
            /* Example of graceful degredation */
            label.magiclabel {
                position: static;
            }
        </style>
    </noscript>
</head>
<body>
<label>This is not a magic label</label>

<form>
    <label class="magiclabel" for="input-1">Test input 1</label>
    <input class="magiclabel" type="text" id="input-1" name="input_1" value="">

    <label class="magiclabel" for="input-2">Test input 2 (with default value)</label>
    <input class="magiclabel" type="text" id="input-2" name="input_2" value="Default value">
</form>

<script src="magiclabel.js"></script> 
</body>
</html>

香草magiclabel.js

(function() {
    var oldOnload = typeof window.onload == "function" ? window.onload : function() {};

    window.onload = function() {
        // Don't overwrite the old onload event, that's just rude
        oldOnload();
        var labels = document.getElementsByTagName("label");

        for ( var i in labels ) {
            if (
                // Not a real part of the container
                !labels.hasOwnProperty(i) ||
                // Not marked as a magic label
                !labels[i].className.match(/\bmagiclabel\b/i) ||
                // Doesn't have an associated element
                !labels[i].getAttribute("for")
            ) { continue; }

            var associated = document.getElementById( labels[i].getAttribute("for") );
            if ( associated ) {
                new MagicLabel(labels[i], associated);
            }
        }
    };
})();

var MagicLabel = function(label, input) {
    this.label = label;
    this.input = input;

    this.hide = function() {
        this.label.className += " hidden";
    };

    this.show = function() {
        this.label.className = this.label.className.replace(/\bhidden\b/ig, "");
    };

    // If the field has something in it already, hide the label
    if ( this.input.value ) {
        this.hide();
    }

    var self = this;

    // Hide label when input receives focuse
    this.input.onfocus = function() {
        self.hide();
    };

    // Show label when input loses focus and doesn't have a value
    this.input.onblur = function() {
        if ( self.input.value === "" ) {
            self.show();
        }
    };

    // Clicking on the label should cause input to be focused on since the `for` 
    // attribute is defined. This is just a safe guard for non-compliant browsers.
    this.label.onclick = function() {
        self.hide();
    };
};

Vanilla demo

如您所见，大约一半的代码都包含在window.onload的初始化中。这可以通过使用框架来缓解。这是一个使用jQuery的版本：

$(function() {
    $("label.magiclabel[for]").each(function(index, label) {
        label = $(label);
        var associated = $("#" + label.attr("for"));

        if ( associated.length ) {
            new MagicLabel(label, associated);
        }
    });
});

var MagicLabel = function(label, input) {
    // If the field has something in it already, hide the label
    if ( input.val() !== "" ) {
        label.addClass("hidden");
    }

    label.click(function() { label.addClass("hidden"); });
    input.focus(function() { label.addClass("hidden"); });
    input.blur(function() {
        if ( input.val() === "" ) {
            label.removeClass("hidden");
        }
    });
};

jQuery demo。标记不需要更改，但当然您需要包含jQuery库。

<input type =“text”/> helper（用户输入时淡出文本）javascript

3 个答案: