使用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>