0


<label>入力用の HTML5 プレースホルダー属性のような HTML 連絡先フォームで要素 を使用しようとしています。私は、次の機能を提供する再利用可能な関数として機能する次の 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が内部にあるという事実を回避する必要があります。inputinputinputfocus

また、IEでこれを実行したいと思います（そうでない場合は、html5プレースホルダーを使用することを強くお勧めします！）。つまり、をに変更する必要がありele.targetますele.srcElement。

于 2013-02-26T15:42:54.780 に答える
0

これは、私が使用したリスナーの数を考えると少しやり過ぎだと思われるかもしれません。不要と思われるものは自由に削除してください。ただし、HTML 構造をそのまま使用して、必要なすべての効果を提供できるようにしました。s idに一致するsまたはそれと一致する<label>s のいずれかで機能するはずです(一致するidがない場合)。nameよりもidを使用することを好むといつも言います。このJavaScriptは、古い IE バージョンの shim が必要な場合を除いて、すべてのブラウザーでも動作するはずです (1 つまたはエラー メッセージに含まれていない場合はお知らせください)。<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 に答える