Более простой способ переключать описания полей с помощью JavaScript

Question

У меня есть простая форма, которая принимает отзывы пользователей. По сути, я просто хочу переключать входные значения - Имя, E-mail, Тема, Комментарии.

<form name="email_rep" id="email_rep" method="POST">
    <input type="text" width="100" name="cust" value="Name" maxlength="100" class="fields" onFocus="toggleLabels(1)" onBlur="toggleLabels(5)">
    <input type="text" width="100" name="cust_email" maxlength="100" value="E-mail" class="fields" onFocus="toggleLabels(2)" onBlur="toggleLabels(6)"><br />
    <input type="text" width="100" name="cust_subject" value="Subject" maxlength="100" class="fields-alt" onFocus="toggleLabels(3)" onBlur="toggleLabels(7)"><br />
    <input type="text" width="100" name="cust_comment" maxlength="500" value="Comments" class="fields-alt" onFocus="toggleLabels(4)" onBlur="toggleLabels(8)"><br />
    <input type="submit" value="Send" name="submit_email" id="submit" onClick="sendButton()">
</form>

и соответствующий JS:

function toggleLabels(x) {
    switch(x) {
        case 1: (document.email_rep.cust.value=="Name") ? (document.email_rep.cust.value="") : (false); break;
        case 2: (document.email_rep.cust_email.value=="E-mail") ? (document.email_rep.cust_email.value="") : (false); break;
        case 3: (document.email_rep.cust_subject.value=="Subject") ? (document.email_rep.cust_subject.value="") : (false); break;
        case 4: (document.email_rep.cust_comment.value=="Comments") ? (document.email_rep.cust_comment.value="") : (false); break;
        case 5: (document.email_rep.cust.value=="") ? (document.email_rep.cust.value="Name") : (false); break;
        case 6: (document.email_rep.cust_email.value=="") ? (document.email_rep.cust_email.value="E-mail") : (false); break;
        case 7: (document.email_rep.cust_subject.value=="") ? (document.email_rep.cust_subject.value="Subject") : (false); break;
        case 8: (document.email_rep.cust_comment.value=="") ? (document.email_rep.cust_comment.value="Comments") : (false); break;
    }
}

Я имею в виду, что это работает, но это не совсем кратко и определенно не для повторного использования. Я думал передать другую переменную - скажем "y", где y = "email_rep", и, возможно, другую - сказать "z", где z = "Имя" / "E-mail" / "Тема" / "Комментарии", но это не работая на меня, я не знаю, похоже ли это на передаваемые строки или в чем проблема. Любые предложения, чтобы сделать это проще?

Answer 1

Это похоже на работу. Он использует заполнители, но также использует jQuery для имитации функциональности заполнителей: http://jsfiddle.net/kmkRV/

$(function() {
    $("input:text").each(function() {
        $(this).val($(this).attr("placeholder"));
    }).focus(function() {
        if ($(this).val() == $(this).attr("placeholder")) {
            $(this).val("");
        }
    }).blur(function() {
        if ($(this).val() == "") {
            $(this).val($(this).attr("placeholder"));
        }
    });
});

Это jQuery javascript. Вот HTML-код:

<form name="email_rep" id="email_rep" method="POST">    
    <input type="text" width="100" name="cust" placeholder="Name" maxlength="100">    
    <input type="text" width="100" name="cust_email" maxlength="100" placeholder="E-mail"><br />     
    <input type="text" width="100" name="cust_subject" placeholder="Subject"><br />     
    <input type="text" width="100" name="cust_comment" maxlength="500" placeholder="Comments"><br />     
    <input type="submit" value="Send" name="submit_email" id="submit" onClick="sendButton()"> </form> 

Answer 2

Используя jQuery, я придумала, пожалуй, самое повторно используемое решение. Да, он использует jQuery, но это очень мощный и полезный инструмент.

Я сделал немного магии с .data(), чтобы сохранить исходное значение. Взгляните на этот JSFiddle .

Код:

$(document).ready(function() {
    $("input").each(function() {
        $(this).data("placeholder", $(this).val());
    });

    $("input").live("focus", function() {
        if($(this).val() == $(this).data("placeholder"))
        {
            $(this).val('');
        }
    });

    $("input").live("blur", function() {
        if(!$(this).val().length)
        {
            $(this).val($(this).data("placeholder"));
        }
    });
});

Возможно, вы могли бы уменьшить его на несколько строк, но я хотел, чтобы это было понятно. Кроме того, это повлияет на любые новые элементы, добавляемые динамически в DOM, из-за использования .live().

---

EDIT

Чтобы сделать чистую разметку, взгляните на ЭТОТ JSFiddle ; он захватывает атрибут placeholder и помещает его в value как запасной вариант.

$(document).ready(function() {
    $("input").each(function() {
        $(this).data("placeholder", $(this).attr("placeholder"));
        $(this).val($(this).data("placeholder"));
    });

    $("input").live("focus", function() {
        if($(this).val() == $(this).data("placeholder"))
        {
            $(this).val('');
        }
    });

    $("input").live("blur", function() {
        if(!$(this).val().length)
        {
            $(this).val($(this).data("placeholder"));
        }
    });
}    );

Answer 3

Я думаю, это то, что вы пытаетесь сделать:

function toggleLabelValue(obj, val) {
    if (obj.value == val) {
        obj.value = "";
    } else {
        obj.value = val;
    }
}

// examples:
toggleLabelValue(document.email_rep.cust, "Name");
toggleLabelValue(document.email_rep.cust_email, "E-mail");

Или, поскольку все ваши объекты имеют одинаковый корень, вы можете встроить этот корень в функцию следующим образом:

function toggleRepLabelValue(field, val) {
    if (document.email_rep[field].value == val) {
        document.email_rep[field].value = "";
    } else {
        document.email_rep[field].value = val;
    }
}

// examples:
toggleRepLabelValue("cust", "Name");
toggleRepLabelValue("cust_email", "E-mail");

Answer 4

HTML5 имеет прекрасный новый атрибут для полей ввода, который называется placeholder.

Хотя это еще не поддерживается некоторыми браузерами, я подумал, что стоит указать в качестве ответа для будущих читателей.

Вы в основном используете это как:

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

http://jsfiddle.net/ZP9z3/

В Firefox при фокусировке на вводе текст-заполнитель удалялся, а при размытии, если новое значение не вводится, текст-заполнитель восстанавливается.

UPDATE

Используя jQuery, вы также можете имитировать поведение заполнителя с небольшим фрагментом кода:

$('input:text').focus(function(){
    $(this).val('');
}).blur(function(){
    if($(this).val() == "")
    {
        $(this).val($(this).attr('placeholder'))
    }
}
);

http://jsfiddle.net/ZP9z3/3/

Это в основном настраивает каждый ввод так, чтобы его заполнитель использовался, если он пустой.