Question

我想在我的html联系表单中使用<label>元素，就像输入的HTML5占位符属性一样。我已经编写了以下JavaScript来充当可重用的函数，它将提供以下功能。

按名称查找输入。
获取输入值。
找到属于输入的标签。
根据输入的状态更改标签样式。
根据输入值更改标签样式。

然而它不起作用，我不知道为什么控制台中没有出现错误。我究竟做错了什么？ here is a JS Fiddle with code

function placeholder(field_name) {

    // Get the input box with field_name 
    // Then get input value
    var box = document.getElementsByName(field_name);
    var i;
    for (i = 0; i < box.length; i++) {
        var value = document.getElementById(box[i].value);
    }

    // Get the labels belonging to each box using the HTML for attribute
    var labels = document.getElementsByTagName('LABEL');
    for (i = 0; i < labels.length; i++) {
        if (labels[i].htmlFor !== '') {
            var elem = document.getElementById(labels[i].htmlFor);
            if (elem) {
                box.label = labels[i];
            }
        }
    }

    // Colors
    var focusColor = "#D5D5D5";
    var blurColor = "#B3B3B3";

    // If no text is in the box then show the label grey color
    box.onblur = function () { 
        box.label.style.color = blurColor; 
    };

    // If input focuses change label color to light grey
    box.onfocus = function () { 
        box.label.style.color = focusColor; 
    };

    // If there is text in the box then hide the label
    if (box.value !== "") {
        // Quick do something, hide!
        box.label.style.color = "transparent";
    }
}

// Call the function passing field names as parameters
placeholder(document.getElementsByName("email"));
placeholder(document.getElementsByName("firstName"));
placeholder(document.getElementsByName("lastName"));

Answer 1

http://jsfiddle.net/cCxjk/5/

var inputs = document.getElementsByTagName('input');
var old_ele = '';
var old_label ='';
function hide_label(ele){
    var id_of_input = ele.target.id;
    var label = document.getElementById(id_of_input + '-placeholder');

    if(ele.target == document.activeElement){
        label.style.display = 'none';    
    }
    if (old_ele.value == '' && old_ele != document.activeElement){
        old_label.style.display = 'inline';
    }
    old_ele = ele.target;
    old_label = label;
    }

for(var i = 0; i < inputs.length; i++){
    inputs[i].addEventListener('click', hide_label);
}

我会指出一些事情，你必须找到label位于input内的事实，因此用户现在无法点击{{1}的一半实际上有input收益input。

另外我想你想在IE中这样做（否则我强烈建议你使用html5占位符！）这意味着你需要将focus更改为ele.target。

Answer 2

这可能被认为对我使用的听众数量有点过分，随意删除你认为不必要的任何人，但我已经尝试使用你的HTML结构，并给你所有想要的效果。它应该适用于<label> s 匹配<input> s id 或匹配<name>（没有 id 匹配）。我总是说喜欢在名称上使用 id 。我相信这个 JavaScript 也应该适用于所有浏览器，除了addEventListener，你需要为旧的IE版本提供垫片（让我知道它是不是在一个/错误信息）。

Demo

var focusColor = "#D5D5D5", blurColor = "#B3B3B3";
function placeholder(fieldName) {
    var named = document.getElementsByName(fieldName), i;
    for (i = 0; i < named.length; ++i) { // loop over all elements with this name
        (function (n) { // catch in scope
            var labels = [], tmp, j, fn, focus, blur;
            if ('labels' in n && n.labels.length > 0) labels = n.labels; // if labels provided by browser use it
            else { // get labels from form, filter to ones we want
                tmp = n.form.getElementsByTagName('label');
                for (j = 0;j < tmp.length; ++j) {
                    if (tmp[j].htmlFor === fieldName) {
                        labels.push(tmp[j]);
                    }
                }
            }
            for (j = 0; j < labels.length; ++j) { // loop over each label
                (function (label) { // catch label in scope
                    fn = function () {
                        if (this.value === '') {
                            label.style.visibility = 'visible';
                        } else {
                            label.style.visibility = 'hidden';
                        }
                    };
                    focus = function () {
                        label.style.color = focusColor;
                    };
                    blur = function () {
                        label.style.color = blurColor;
                    };
                }(labels[j]));
                n.addEventListener('click', fn); // add to relevant listeners
                n.addEventListener('keydown', fn);
                n.addEventListener('keypress', fn);
                n.addEventListener('keyup', fn);
                n.addEventListener('focus', fn);
                n.addEventListener('focus', focus);
                n.addEventListener('blur', fn);
                n.addEventListener('blur', blur);
            }
        }(named[i]));
    }
};
placeholder("email"); // just pass the name attribute
placeholder("firstName");
placeholder("lastName");

使用HTML5占位符等标签

2 个答案: