帮助器(当用户输入时淡出文本)javascript

我想在输入字段text和textarea中添加有用的文本(在没有任何框架使用的 javascript中)这样的东西,但不知道它叫什么

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

因为它在me.com中使用,但我不想提交用作帮助程序的值.

抱歉英文不好.

谢谢.

解决方法

我发现解决此问题的最佳方法是使用< 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库.

帮助器(当用户输入时淡出文本)javascript

解决方法

猜你在找的JavaScript相关文章