Question

我有一个简单的表单，需要用户反馈。基本上我只想切换输入值 - 名称，电子邮件，主题，评论。

<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 =“姓名”/“电子邮件”/“主题”/“评论”，但它不是为我工作，我不知道这是不是通过字符串或问题是什么。是否有任何使这更简单的建议？

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

HTML5为输入字段placeholder提供了一个可爱的新属性。

虽然目前某些浏览器尚不支持，但我认为值得指出是未来读者的答案。

你基本上就像使用它一样：

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

http://jsfiddle.net/ZP9z3/

在Firefox中，将焦点放在输入上会删除占位符文本，而在模糊时，如果未输入新值，则会恢复占位符文本。

<强>更新

使用jQuery，您还可以使用一小段代码模仿占位符的行为：

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

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

这基本上设置了每个输入，以便在它为空时使用它的占位符文本。

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

使用jQuery，我想出了最可重用的解决方案。是的，它使用jQuery，但它是一个非常强大，有用的工具。

我用.data()做了一些魔术来存储原始值。看看this 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"));
        }
    });
});

你可能会把它缩小几行，但我希望它清楚。此外，由于使用.live()，这将影响动态添加到DOM的所有新元素。

修改

要获得更清晰的标记，请查看THIS 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")); } }); } );

使用JavaScript更轻松地切换字段描述

4 个答案: