问将动态创建的输入值复制到文本区域
EN

Stack Overflow用户

提问于 2017-08-01 00:56:49

回答 2查看 65关注 0票数 2

我有带3列的引导行。每一列都有输入。我有按钮“添加行”，它添加了另一行与3列。每个输入值都复制到textarea。但我有问题。我只能从第一行复制值。如何从所有输入复制值？第二个问题，我如何格式化这样的输出？

Row1数据-1数据-2数据-3

Row2数据-4数据-5数据-6

<div class="container">
<div class="row inputs">
    <div class="col-sm-4">
        <input type="text" name="szerokosc" class="entry" id="szerokosc_1" value="" />
    </div>
    <div class="col-sm-4">
        <input type="text" name="wysokosc" class="entry" id="wysokosc_1" value="" />
    </div>
    <div class="col-sm-4">
        <input type="text" name="dlugosc" class="entry" id="dlugosc_1" value="" />
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <button id="add">add row</button>
    </div>
</div>
</div>
<textarea class="box" name="result" rows="5"> </textarea>

$('#add').click(function(){
$('.row.inputs:last').clone().insertAfter(".row.inputs:last").val('');
});
$("input").on('keyup',function() {
    var values = "";
    $("input:text").each(function(i) {
        var text=$(this).prev("label").text();
        values +=  (i > 0 ? "\n" : "") + this.value+ " "+text;
    });
    $("textarea").val(values);
});

jquery

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-01 01:07:14

这就是你要找的吗？

不，要使新添加的输入也触发keyup，请将$("input").on('keyup', function() {更改为$(document).on('keyup', "input", function() {

$('#add').click(function() {
  $('.row.inputs:last').clone().insertAfter(".row.inputs:last");
  $('.row.inputs:last input').val("")
  console.log($(".row.inputs").length)
  if ($(".row.inputs").length == 2){
  $('.row.inputs:last .col-sm-4:last').css("float","left").after('<div><button style="margin-left: 20px" class="removeRow">remove row</button></div>')
  } 
    
});
$(document).on('keyup', "input", function() {
  updateTextarea()
});

$(document).on('click', ".removeText", function() {
  $(this).prev("input").val("")
  updateTextarea()
});

$(document).on('click', ".removeRow", function() {
  $(this).closest(".row").remove()
  updateTextarea()
});

function updateTextarea() {
  var values = "";
  $(".row.inputs").each(function(i) {
    values += "row" + (i + 1) + ": "
    $(this).find("input").each(function(x, e) {
      $(this).next("button").css("display", this.value.length > 0 ? "initial": "none")
      var text = $(this).prev("label").text();
      values += this.value + " " + text;
    })

    values += "\n"
  });
  $("textarea").val(values);
}

textarea {
  height: 200px;
  width: 400px;
}

.removeText{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row inputs">
    <div class="col-sm-4">
      <input type="text" name="szerokosc" class="entry" id="szerokosc_1" value="" /><button class="removeText">remove text</button>
    </div>
    <div class="col-sm-4">
      <input type="text" name="wysokosc" class="entry" id="wysokosc_1" value="" /><button class="removeText">remove text</button>
    </div>
    <div class="col-sm-4">
      <input type="text" name="dlugosc" class="entry" id="dlugosc_1" value="" /><button class="removeText">remove text</button>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <button id="add">add row</button>
    </div>
  </div>

  <textarea row="10"></textarea>

票数 2

Stack Overflow用户

发布于 2017-08-01 01:08:16

对于添加了动态的元素，您必须使用事件委托。

应该使用.on()方法绑定单击事件处理程序。

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

了解有关事件委托这里。的更多信息

$('#add').click(function(){
  var anotherRow=$('.row.inputs:eq(0)').clone();
  anotherRow.append('<div class="col-sm-3"><button class="removeText">remove text</button></div>');
  anotherRow.find('input').each(function(){
    $(this).val('');
  });
  anotherRow.insertAfter(".row.inputs:last");
});
$(document).on('keyup',"input",function() {
    var values = "";
    $("input:text").each(function(i) {
        var text=$(this).prev("label").text();
        values +=  (i%3 ==0 ? "\n row"+(i/3)+" " :"") + this.value+ " "+text;
    });
    $("textarea").val(values);
});
$(document).on('click',".removeText",function() {
    $(this).closest('.inputs').remove();
    var values = "";
    $("input:text").each(function(i) {
        var text=$(this).prev("label").text();
        values +=  (i%3 ==0 ? "\n row"+(i/3)+" " :"") + this.value+ " "+text;
    });
    $("textarea").val(values);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row inputs">
    <div class="col-sm-3">
        <input type="text" name="szerokosc" class="entry" id="szerokosc_1" value="" />
    </div>
    <div class="col-sm-3">
        <input type="text" name="wysokosc" class="entry" id="wysokosc_1" value="" />
    </div>
    <div class="col-sm-3">
        <input type="text" name="dlugosc" class="entry" id="dlugosc_1" value="" />
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <button id="add">add row</button>
    </div>
</div>
</div>
<textarea class="box" name="result" rows="5"> </textarea>