使用this.select选择多输入文本（） - 选择下一个时不要取消选择

Question

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

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

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

但我要做的是突出显示超过1个文本框。 一旦我点击另一个文本框，前一个文本框就会被取消选中。

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

有任何想法吗？

Answer 1

您可以执行以下操作：

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

这是一个快速演示： 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');
    }
  });
});

Answer 2

来自@KK的解决方案是一个很好的解决方案。 在我看到它之前，我提出了另一个解决方案，所以我想我会发布，也许它可以帮助别人。

1. 我使用通用的html多选下拉列表来获取数据列表而不是一系列输入。

2. 然后我使用了这个问题中的JavaScript函数将html <select multiple>中的值复制到剪贴板 ，它从select中获取多个选中的值并将它们放入带换行符而不是像示例那样连接。

3. 然后我使用clipboard.js将值复制到我的剪贴板。 网站上的默认示例显示了如何执行此操作。

JS

function changeClipboardValue(selectBox) {
    var clipboard = document.getElementById("clipboard");
    var text = "";
    for (i = 0; i < selectBox.length; i++) {
        if(selectBox.options[i].selected) text += selectBox.options[i].value + "\r\n";
    }
    clipboard.value = text;
}

function keydown(e) {
    if(e.keyCode === 17) {
        var clipboard = document.getElementById("clipboard");
        clipboard.select();
    }
}

function keyup(e) {
    if(e.keyCode === 17) {
        var selectBox = document.getElementById("selection");
        selectBox.focus();
    }
}

用于多选的HTML

<select multiple="multiple" size="10" id="selection" onkeydown="keydown(event)" onchange="changeClipboardValue(this)" style="width: 100%; height: 400px;">

空Textarea的HTML

<textarea id="clipboard" onkeyup="keyup(event)"></textarea>