0


我正在尝试<label>在我的 html 联系表单中使用元素，例如用于输入的 HTML5 占位符属性。我编写了以下 JavaScript 来充当可重用函数，女巫将提供以下功能。

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

但是它不起作用，我不知道为什么控制台中没有出现错误。我究竟做错了什么？这是一个带有代码的 JS Fiddle

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"));
4

2 回答 2

0

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因此用户现在无法单击一半input并且实际上获得了input收益focus。

另外我猜您想在 IE 中执行此操作（否则我强烈建议您使用 html5 占位符！）这意味着您需要ele.target将ele.srcElement.

于 2013-02-26T15:42:54.780 回答
0

这可能被认为对我使用的侦听器数量有点矫枉过正，请随意删除任何您认为不必要的内容，但我已尝试使用您拥有的 HTML 结构并为您提供所有想要的效果。它应该适用于匹配<label>s id或匹配它的 s （假设没有id匹配）。我总是说更喜欢使用id而不是name。我相信这个JavaScript也应该在所有浏览器中工作，除了旧 IE 版本需要一个 shim （如果它不在一个/错误消息中，请告诉我）。<input><name>addEventListener

演示

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");
于 2013-02-26T16:31:48.567 回答