Question

我有AJAX生成的简单文本框。

<input type='text' id='txt1' name='txt1_nm'  />

当我按下按钮时，我想做什么。输入全部复制到不同的div中，并由用户插入新值。

我用

$('#txt1').html();

但是，该值不会仅复制到文本框

Answer 1

您需要使用clone()，以便获得具有其值的元素。在下面的代码段中的文本框中输入任意内容，然后按Copy按钮。

//detect the click of the copy button
$('#copyBtn').click(function(){
  //get the clonned element
  var inputElement = $('#txt1').clone();
  //add clonned element to a new div
  $('#copiedDiv').html(inputElement);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='text' id='txt1' name='txt1_nm'  />
</div>
<div id='copiedDiv'></div>
<button id='copyBtn'>Copy</button>

如果要添加多个克隆项，则需要更改id元素的input，然后将其附加到页面。你可以这样做来实现它，

//detect the click of the copy button
$('#copyBtn').click(function(){
  //get the last input item
  var $inputEl = $('input[name="txt1_nm"]:last');
  //get the next id number
  var num = parseInt( $inputEl.prop("id").match(/\d+/g), 10 ) +1;
  //clone and set a new id for this element
  var $cloneEl = $inputEl.clone().prop('id', 'txt'+num );
  //add clonned element to a new div
  $('#copiedDiv').append($cloneEl);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='text' id='txt1' name='txt1_nm'  />
</div>
<div id='copiedDiv'></div>
<button id='copyBtn'>Copy</button>

Answer 2

您可以简单地使用：

$('#txt1').clone()

它将使用其所有内容执行该元素的深度克隆。

注意：克隆元素也会复制其ID（如果有）。您应事先将ids更改为classes。

这来自文档：

注意：使用.clone（）具有生成具有重复id属性的元素的副作用，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

Answer 3

$(document).on('click','#myBtn',function(){
value=$('#txt1').val();

$('#myDiv').empty();
$('#myDiv').append($('#txt1').clone());
$('#txt1').val("");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='text' id='txt1' name='txt1_nm'  />
<button type="button" id="myBtn">Click Me</button>

<div id="myDiv"></div>

如何使用其值复制输入元素？

3 个答案: