Question

我正在尝试创建一个允许用户添加其成员的注册表单。为了快速完成这项工作，我创建了一个具有一个输入的基本表单，当键盘上的回车键被创建时，将创建一个新行。

我已经尝试了输入中的电子密钥，但我只能提醒它而不是重复，这是我的表格。

<form id="contactForm" novalidate>
    <table id="members" style="width:100%">
        <tr>
            <td>
                <div class="row control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>Member Name</label>
                        <input type="text" class="form-control" placeholder="Member Name" id="member">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
            </td>    
        </tr>    
    </table>    
    <br>
    <div id="success"></div>
    <div class="row">
        <div class="form-group col-xs-12">
            <button type="submit" class="btn btn-success btn-lg pull-right">Next</button>
        </div>
    </div>
</form>

Answer 1

我建议使用javascript框架。有几个是有能力的，但我会推荐Ember.js

交叉引用这个SO问题，这是与你的问题相同的问题，除了在Embers.js框架的背景下：

Ember: Adding input fields dynamically on click and reading the new data

它描述了单击按钮以显示新字段，但填充字段可以完成相同的操作。

希望这会有所帮助。

Answer 2

不需要额外的JavaScript框架。现代浏览器可以使用HTML5和本机Javascript解决这个问题。这是一个小例子。

<template id="my-row">
    <div>
        <label>Member Name</label>
        <input type="text" placeholder="Member Name" name="member[]" required>
    </div>
</template>

使用HTML5，您可以使用模板标记。它是为了您的目的而制作的。模板内容未显示在屏幕上。这只是看不见的标记。那么我们来看看，javascript会是什么样子。

<script>
    var template = document.getElementById('my-row');
    var parent = document.querySelector('#members td');
    document.addEventListener('keyup', function(event) {
        event.preventDefault();
        if (event.key == 'Enter') {
            var clone = document.importNode(template.content, true);
            parent.appendChild(clone);
        }    
    });
</script>

例如，这段javascript代码可以满足您的所有需求。按下回车键时，HTML5模板将作为子项插入。

您需要处理的事情：旧版浏览器不支持HTML5模板标记。最终，您必须处理多种形式，以便在旧版浏览器（如Internet Explorer 11）中处理HTML5模板标记。

添加行以形成哪些成员？

2 个答案: