调整默认值脚本以处理多行答案

【问题标题】：adjusting default value script to work with multiple rows调整默认值脚本以处理多行
【发布时间】：2011-05-20 16:23:19
【问题描述】：

我正在使用默认值脚本 (jquery.defaultvalue.js) 将默认文本添加到表单上的各个输入字段：

<script type='text/javascript'>
jQuery(function($) {
    $("#name, #email, #organisation, #position").defaultvalue("Name", "Email", "Organisation", "Position");
});
</script>

表格如下所示：

<form method="post" name="booking" action="bookingengine.php">
                <p><input type="text" name="name[]" id="name">
                 <input type="text" name="email[]" id="email">
                <input type="text" name="organisation[]" id="organisation">
                <input type="text" name="position[]" id="position">
                <span class="remove">Remove</span></p>

                <p><span class="add">Add person</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" /></p>


</form>

我还使用了一个脚本，以便用户可以向表单动态添加（克隆）行：

<script>
    $(document).ready(function() {

            $(".add").click(function() {
                var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
                x.find('input').each(function() { this.value = ''; });
                return false;
            });

            $(".remove").click(function() {
                $(this).parent().remove();
            });

        });
</script>

因此，当页面加载时，会有一行具有默认值。然后用户将开始向输入添加信息。我想知道是否有办法让默认值显示在随后添加的行中。

您可以看到正在运行的表单here。

谢谢，

尼克

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

创建新行后，只需调用.defaultValue。以下假设列的格式是可预测的/保持不变。

$(".add").click(function() {
     var x = $("form > p:first-child");
     x.clone(true).insertBefore("form > p:last-child");
     x.find('input:not(:submit)').defaultvalue("Name", "Email", "Organisation", "Position");
    return false;
});

您应该从输入字段中删除 id，因为一旦克隆了这些，id、类以及有关元素的所有内容都会被克隆。所以你基本上会在 DOM 中得到多个具有相同 id 的元素——不好。

更好的“设置默认值”

如果“设置默认插件”纯粹用于此目的，我个人会删除它。它可以很容易地用下面的代码重新创建，而且效率更高，因为它不关心输入元素的顺序。

var defaults = {
    'name[]':           'Name',
    'email[]':          'Email',
    'organisation[]':   'Organisation',
    'position[]':       'Position'
};
    
var setDefaults = function(inputElements)
{               
    $(inputElements).each(function() {
        var d = defaults[this.name];
        if (d && d.length)
        {
            this.value = d;
            $(this).data('isDefault', true);
        }
    });
};

然后你可以简单地做（一旦页面加载）：

setDefaults(jQuery('form[name=booking] input'));

并且一旦添加了一行：

$(".add").click(function() {
     var x = $("form > p:first-child");
     x.clone(true).insertBefore("form > p:last-child");
     setDefaults(x.find('input')); // <-- let the magic begin
    return false;
});

对于默认值的切换，您可以简单地委托事件并在 setDefault 的帮助下进行

// Toggles
$('form[name=booking]').delegate('input', {
    'focus': function() {
       if ($(this).data('isDefault'))
           $(this).val('').removeData('isDefault');
    },
    'blur': function() {
       if (!this.value.length)    setDefaults(this);
    }
});

小提琴： http://jsfiddle.net/garreh/zEmhS/3/（显示正确切换默认值）

【讨论】：

非常感谢加里。效果很好。我将如何使用您的方法设置默认文本的颜色？我希望默认文本的颜色更浅，以将其与完整文本区分开来。
嗨尼克。没问题。使用较浅的文本颜色：jsfiddle.net/garreh/zEmhS/4

【解决方案2】：

好吧，首先； id 必须是唯一的，因此如果您打算拥有多个类，请将您的 id 更改为类。

然后在“return false”之前的添加函数中：

var 
    inputs = x.getElementsByTagName('input'),
    defaults = ["Name", "Email", "Organisation", "Position"];

for(var i in inputs){
    if(typeof inputs[i] == 'object'){
        $(inputs[i]).defaultvalue(defaults[i]);
    }
}

【讨论】：