Select Multiple Input Text Using this.select() — Don't Deselect When Selecting the Next One

Question

I can easily select the text of a textbox for copying to clipboard using:

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

(ie highlight the text so I can click CMD+C to copy to clipboard)

But what I'm trying to do is highlight more than 1 textbox. As soon as I click on another textbox, the previous one gets unselected.

If this is not possible; an alternative approach might be to have a checkbox next to each line of text (in a div or textbox), then click each checkbox I want to select (ie highlight the text as if with a mouse), then click CMD+C to copy all of those items to clipboard.

Any ideas?

Answer 1

You can do the following:

1. Instead of selecting the input, try to toggle a specific class on the input as a response to some user action ie click, doubleclick etc.
2. On the above events, add/remove the classes on input.
3. Add css rules to this specific class such that it appears that it has been selected. Maybe give some border, outline or different background colour.
4. When you need the text of these inputs, iterate on that specific class and get their value and store them in a textarea which will be hidden from user and then execute the copy command on it.

Here is a quick demo: 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

The solution from @KK is a good one. Before I saw it, I came up with this other solution so I figured I would post, maybe it helps someone out.

1. I used a generic html multi-select dropdown for the list of data instead of a series of inputs.

2. Then I used a JavaScript function found in this question Copy values from html <select multiple> to clipboard which grab the multi-selected values from the select and put them into a with line breaks instead of concatenated like the example.

3. Then I use clipboard.js to copy the values from the to my clipboard. The default example on the website shows how to do this.

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 for Multi-Select

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

HTML for empty Textarea

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