Question

我使用默认值脚本（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中看到该表单。

谢谢，

尼克

Answer 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，就会克隆id，类，元素的所有内容。所以你基本上会在DOM中使用相同的id来结束多个元素 - 不是很好。

更好的“设置默认值”

我个人会删除“set defaults plugin”，如果它纯粹在网站上用于此目的。它可以很容易地用下面的方法重新创建，这样更有效，因为它不关心输入元素的排序。

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/（显示正确切换默认值）

Answer 2

哦，首先是Okey; id必须是唯一的，所以如果你想要有多个ID，你可以将你的id更改为类。

然后在你的“返回false”之前的add函数中：

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]);
    }
}

调整默认值脚本以使用多行

2 个答案:

更好的“设置默认值”