在输入上添加新的输入字段答案

【问题标题】：add new input field on input在输入上添加新的输入字段
【发布时间】：2011-10-19 08:39:48
【问题描述】：

用户好，

我想制作一个带有输入字段的表单，当用户开始在该输入字段中键入时，另一个输入字段会出现在其下方。这样用户就可以添加多个产品，而不会看到包含 20 个输入字段的列表，而在输入第一个输入字段时只会看到一个新的输入字段。

我希望这里的某个人知道我在哪里可以找到这个。

亲切的问候，

八月

【问题讨论】：

您可以动态执行此操作，例如当用户填写或键入最少字符数时，您可以使用脚本显示下一个输入字段。请检查并用谷歌搜索。viralpatel.net/blogs/2009/01/…

【解决方案1】：

正如@karthikrangaraj 在他的评论中指出的那样，您可以将onkeyup 事件处理程序附加到这些输入，并在那里调用一个函数，该函数将动态地将元素添加到容器中。

您必须跟踪哪些输入字段已经创建了子输入，以避免在每次按键时创建新字段，并且您还必须跟踪添加的元素数量以便将一致的name/id 属性分配给新创建的元素。

查看this fiddle 中的基本工作示例。

【讨论】：

很好的例子，这让我更进一步。但是根据我在 javascript 方面的经验，我还有一个问题要问你，是否可以使用文本及其下方的输入创建一个新的 div？
是的，当然，您可以创建一个新的<div> 元素并将<input> 添加到其中。然后将<div> 添加到容器元素中。请参阅updated fiddle。
哇，谢谢！现在我只需要弄清楚如何在该 div 中放置一些文本和另一个输入：p。但是你的帮助很棒！
您可以将文本附加到元素上，例如myDivElement.appendChild(document.createTextNode("Some random text."));。请参阅updated fiddle 以供参考。至于添加另一个<input>，只需按照示例中的模式即可：-)
你太棒了！这将让我添加我需要的所有东西。