Question

我已经尝试了很多与表单相关的解决方案（例如，防止默认，更改表单属性），但我似乎无法使其工作。基本上，我已经开始使用两个引导程序模板，到目前为止它很顺利。我现在有一个文本框，我希望在第一个文本框中“提交”（即按Enter键）时添加另一个文本框。目前，第一个文本输入添加：

$('#item').after(
                    '<div class="form-group" onsubmit="return false"> <form class="form-horizontal" onSubmit="return false;"> </div><label for="exampleInputEmail1"> What was the value of the sale?</label><input type="text" class="form-control" id="InputSaleValue" placeholder="Enter value"><form onsubmit="return false"> <form action="javascript:void(-1)"> <small id="emailHelp" class="form-text text-muted">Excluding</small></div>'

但是目前页面只是刷新并带我到这个表单的第一部分，我试图生成。

Answer 1

我有这种模板。我在这里贴了它因为也许你可以用它作为踏脚石。只需运行代码段：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<table>
  <tr>

    <td><button type="button" id="button1" style="margin: 10px;">Add Textbox</button>
  </tr>
</table>

</html>
<script>
  $("#button1").click(function() {
    addRow(this);
  });

  function addRow(btn) {
    var parentRow = btn.parentNode.parentNode;
    var table = parentRow.parentNode;
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name = "text1";
    element1.className = "text1"
    cell1.appendChild(element1);
  }
</script>

＆＃13;

Answer 2

在这里，您将使用示例解决方案https://jsfiddle.net/37h6c1rs/

＆＃13;

$('#item').append('<div class="form-group" onsubmit="return false"> <form class="form-horizontal" onSubmit="return false;"> </div><label for="exampleInputEmail1"> What was the value of the sale?</label><input type="text" class="form-control" id="InputSaleValue" placeholder="Enter value"><form onsubmit="return false"> <form action="javascript:void(-1)"> <small id="emailHelp" class="form-text text-muted">Excluding</small></div>');
        
$('#InputSaleValue').keypress(function(e){
  if (e.which === 13) {
    $('#item').append('<div><input type="text id="addedTextbox /></div>')
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item"></div>

＆＃13;

这可能不是您正在寻找的确切解决方案，但这有助于您到达目的地。

在javascript / HTML中输入文本输入（bootstrap）

2 个答案: