Question

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

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

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

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

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

有什么想法吗？

Answer 1

您可以执行以下操作：

尝试在输入上切换特定类，而不是选择输入，作为对某些用户操作的响应，即单击，双击等。
在上述事件中，在输入时添加/删除类。
将css规则添加到此特定类，使其看起来已被选中。也许给出一些边框，轮廓或不同的背景颜色。
当您需要这些输入的文本时，迭代该特定类并获取它们的值并将它们存储在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的解决方案很好。在我看到它之前，我提出了另一个解决方案，所以我想我会发布，也许它可以帮助别人。

我使用了通用的html多选下拉菜单来代替一系列输入。
然后我使用了这个问题Copy values from html <select multiple> to clipboard中的JavaScript函数，该函数从select中获取多个选定的值并将它们放入带换行符而不是像示例那样连接。
然后我使用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>

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

2 个答案: