文本溢出表单组答案

【问题标题】：Text spilling out of form group文本溢出表单组
【发布时间】：2017-07-22 16:02:18
【问题描述】：

我添加了以下输入区域：

('#item').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><label for="exampleInputEmail1"> What?</label><input type="text" class="form-control" id="InputSaleValue" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small><form onsubmit="return false"> </div>');

按回车后，我有：

('#InputSaleValue').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><label for="exampleInputEmail1"> What?</label><input type="text" class="form-control" id="InputCommission" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small><form onsubmit="return false"> </div>');

但是发生的情况是“例如 10%”被添加到第二次添加的底部两次，而不是分别添加到每个添加中。

【问题讨论】：

您能否提供一个使用 sn-p 函数的可运行示例？ (Ctrl+M)
您好，抱歉，我的意思是这样：jsfiddle.net/n5f5m46m

标签： javascript html

【解决方案1】：

发生这种情况是因为在您的第二个代码行中，您在#InputSaleValue 之后添加了模板，这只是输入字段而不是标签，例如包括 10%。因此，您的内容就出现在该字段旁边。您可能想将第一行更改为：

$('#item').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><div id="saleField"><label for="exampleInputEmail1"> What?</label><input type="text" id="InputSaleValue" class="form-control"  placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small></div></form onsubmit="return false"> </div>');

第二行为

$('#saleField').after('<div class="form-group" onsubmit="return false"></div><form action="javascript:void(-1)"><label for="exampleInputEmail1"> What?</label><input type="text" class="form-control" id="InputCommission" placeholder="Enter value"><small id="emailHelp3" class="form-text text-muted">eg 10%</small><form onsubmit="return false"> </div>');

在第一行中，我刚刚包含了包含标签的字段，例如div 内的10，ID 为saleField。在第二行中，我只更改了选择器。这是工作 plunker 的链接：https://plnkr.co/edit/noxcWTmAaLwtYv8vx2CO?p=preview

【讨论】：

'onsubmit' 是 FORM 属性，所以不能在 DIV 标签中使用。
同意，但我只是使用给定的代码示例重新创建。并注意到他缺少什么。还有其他错误的事情，比如在表单中包含表单，而不是在单个表单中添加字段，没有表单结束标记等。这一定只是完整代码的一小部分。
非常感谢！就是这样 :) 也帮助我更好地理解了 HTML。
@NCD 很高兴它有帮助。但是您可以使用 append() 在表单中动态添加输入字段。当您清除要求时，请遵循可用的最佳、干净的方式。
stackoverflow.com/questions/6099301/…

【解决方案2】：

试试这个：

$(function(){
$('#item').after('<form action="javascript:void(-1)" class="form-group" id="formArea" onsubmit="return false"><div class="form-group"><label for="inputSaleValue"> What?</label><input type="text" class="form-control" id="inputSaleValue" placeholder="Enter value"><small class="form-text text-muted">eg 10%</small></div></form>');

$('#inputSaleValue').on('keydown',function(e){
	if ((e.which == 13 || e.keyCode == 13) && $(this).val() != '') {
		e.preventDefault();
		$('#formArea').append('<div class="form-group"><label for="inputCommission"> What?</label><input type="text" class="form-control" id="InputCommission" placeholder="Enter value"><small class="form-text text-muted">eg 10%</small></div>');
	}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="item"></div>

【讨论】：