Question

我有一堆input元素，点按了javascript我会获取这些输入的值并将其粘贴到div某个地方请运行下面的代码以检查

$('#getthelist').click(function() {
  $('.inputs>li .color').map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e) {
    $('.list').append('<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>');
  });
});

ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list {
    margin: 10px;
    width: 270px;
    padding: 25px;
    background-color: #fafafb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values

  
  <li id="color_white">
	  <div>
		  <input type="text" value="#fff" class="color">
	  </div>
  </li>
  
  <li id="color_black">
	  <div>
		  <input type="text" value="#000" class="color">
	  </div>
  </li>
  
</ul>

<div class="list"></div>

所以我有一个问题和一个问题我无法弄清楚如何解决。

问题是，每次单击该按钮时，它会反复粘贴div中的值。对于我正在尝试做的事情，这对我来说是一团糟。所以，当你每次点击时，我怎么强迫它不要重复相同的值。
问题：如何使用相同的点击功能将输入值复制到clipboard？

Answer 1

我试着给你两个问题答案。

Q1的回答   您应该在设置新值之前重置HTML内容。

Q2的回答   你应该使用document.executeCommand（“copy”）来复制文本。

希望它可能有助于解决您的问题。

function copyData(copyText) {
  $("body").append($("<textarea/>").val(copyText).attr({id:"txtareaCopyData"}));
  var copyText = document.querySelector("#txtareaCopyData");
  copyText.select();
  document.execCommand("copy");
  $("#txtareaCopyData").remove();
}

$('#getthelist').click(function() {
  // Clear html div content
  $('.list').html("");
  var copyText = "";
  $('.inputs>li .color').map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e) {
    var _data = '<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>';
    $('.list').append(_data);
    copyText += _data;
  });
  copyData(copyText);
  document.querySelector("#txtCopyArea").addEventListener("click", copyData);
});

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list {
  margin: 10px;
  width: 270px;
  padding: 25px;
  background-color: #fafafb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
  <ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values


    <li id="color_white">
      <div>
        <input type="text" value="#fff" class="color">
      </div>
    </li>

    <li id="color_black">
      <div>
        <input type="text" value="#000" class="color">
      </div>
    </li>
  </ul>
  <input type="hidden" id="txtCopyArea" name="txtCopyArea" />

  <div class="list"></div>

Answer 2

将您的数据保存在localStorage.setItem中（.map的返回值必须保存在localstorage中）
使用localStorage.getItem获取您的数据（使用您为项目设置的键从localstorage获取数据）
使用handlebar.js创建模板，单击复选框时，使用从localstorage获取的数据呈现模板。

对于新数据，您必须更新localstorage。

Answer 3

我已经测试了Dipak chavda的解决方案，但它对我也不起作用。问题是输入是隐藏的类型。所以我把它改成了隐藏的textarea。当你尝试复制时，我会让它显示一段时间，聚焦它，选择它的值，然后执行复制。它有效;）

＆＃13;

function copyData(copyText) {
  var $txtCopyArea = $("#txtCopyArea");
  // set the text as value
  $txtCopyArea.val(copyText);
  // make textarea visible
  $txtCopyArea.removeClass('hidden');
  /* focus & select the text field */
  $txtCopyArea.focus().select();
  /* Copy the text inside the text field */
  document.execCommand("copy");
  /* Alert the copied text */
  alert("Copied the text: " + copyText);
  // hide textarea
  $txtCopyArea.addClass('hidden');
}

$('#getthelist').click(function() {
  // Clear html div content
  $('.list').html("");
  var copyText = "";
  $('.inputs>li .color').map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e) {
    var _data = '<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>';
    $('.list').append(_data);
    copyText += _data;
  });
  copyData(copyText);
});

＆＃13;

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list {
  margin: 10px;
  width: 270px;
  padding: 25px;
  background-color: #fafafb;
}

.hidden {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
  <ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values


    <li id="color_white">
      <div>
        <input type="text" value="#fff" class="color">
      </div>
    </li>

    <li id="color_black">
      <div>
        <input type="text" value="#000" class="color">
      </div>
    </li>
  </ul>
  <textarea id="txtCopyArea" class="hidden"></textarea>

  <div class="list"></div>

＆＃13;

Answer 4

请检查我的代码段。

function copyToClipboad(texts) {
  var textareaElCloned = $('<textarea>' + texts + '</textarea>');
  $('.list').append(textareaElCloned);
  /* Select the text field */
  textareaElCloned[0].select();
  /* Copy the text inside the text field */
  document.execCommand("copy");
}

$('#getthelist').click(function() {
  var html = '';
  var texts = '';
  var itemEls = $('.inputs > li .color');
  
  itemEls.map(function() {
    return {
      name: this.closest('[id]').id,
      value: $(this).val()
    }
  }).get().forEach(function(e, index) {
    var text = '\"' + e.name + '\": \"' + e.value + '\",';
    texts += text;
    html += ('<div>' + text + '</div>');
    
    if (index === itemEls.length-1) {
       copyToClipboad(texts);
    }
  });
  
  $('.list').html(html); // the textarea will be removed at this moment
});

ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list {
    margin: 10px;
    width: 270px;
    padding: 25px;
    background-color: #fafafb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">

    <input type="radio" value="getthelist" id="getthelist"> Click to get the color values

  
  <li id="color_white">
	  <div>
		  <input type="text" value="#fff" class="color">
	  </div>
  </li>
  
  <li id="color_black">
	  <div>
		  <input type="text" value="#000" class="color">
	  </div>
  </li>
  
</ul>

<div class="list" tabindex="1"></div>

jQuery / JavaScript获取输入值，然后复制到剪贴板

4 个答案: