javascript - 使用 this.select() 选择多个输入文本——选择下一个时不要取消选择

Question

我可以使用以下方法轻松选择文本框的文本以复制到剪贴板:

<input type="text" onclick="this.select();" value="This is my Text">

(即突出显示文本，以便我可以单击 CMD+C 复制到剪贴板)

但我要做的是突出显示多个文本框。只要我点击另一个文本框，就会取消选中前一个文本框。

如果这是不可能的；另一种方法可能是在每行文本旁边有一个复选框(在 div 或文本框中)，然后单击我要选择的每个复选框(即用鼠标突出显示文本)，然后单击 CMD+C 进行复制所有这些项目到剪贴板。

有什么想法吗？

Answer 1

您可以执行以下操作:

1. 不要选择输入，而是尝试切换输入上的特定类作为对某些用户操作的响应，例如单击、双击等。
2. 在上述事件中，根据输入添加/删除类。
3. 将 CSS 规则添加到这个特定的类，使其看起来已被选中。也许给一些边框、轮廓或不同的背景颜色。
4. 当您需要这些输入的文本时，迭代该特定类并获取它们的值并将它们存储在一个对用户隐藏的文本区域中，然后在其上执行复制命令。

这是一个快速演示:http://jsfiddle.net/lotusgodkk/GCu2D/2200/

CSS:

  .selected {
    background: #f0f0f0;
    border: 1px solid green
  }

  textarea {
    height: 0;
    width: 0;
    opacity: 0;
  }

HTML:

  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <input type="text" value="This is my Text">
  <button>
    Get Values
  </button>
  <textarea class="result">

  </textarea>

JS:

$(document).ready(function() {
  $("input").click(function() {
    $(this).toggleClass("selected");
  });
  $("button").click(function() {
    var result = '';
    $(".selected").each(function() {
      result += $(this).val();
    });
    $("textarea").val(result);
    $("textarea").select();
    try {
      var text = document.execCommand('copy');//text in clipboard
     } catch (err) {
      console.log('Error');
    }
  });
});