highlight - javascript - select text in table cell and autofill the input on the same row

Question

Right now I'm using document.onmouseup event to select the text. But I'm only able to specify one input in my code. How do I select the text in the first row and put it in the input in the first row, and do the same thing for the second row?

The code snippet is here (from On Text Highlight Event?):

var t = '';
function gText(e) {
t = (document.all) ? document.selection.createRange().text : document.getSelection();

document.getElementById('input1').value = t;
}

document.onmouseup = gText;
if (!document.all) document.captureEvents(Event.MOUSEUP);

https://jsfiddle.net/nrdq71pz/1/

Answer 1

I have used ShowSelection() function from here.

You can add a common class to the inputs where you want this feature. Also, you have to attach mouseup event to all the inputs. Please see below solution.

var els = document.getElementsByClassName('selection');
function getSelection(textComponent) {
  var selectedText;
  if (textComponent.selectionStart !== undefined) { // Standards Compliant Version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  } else if (document.selection !== undefined) { // IE Version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }
  return selectedText;
}

for (var i = 0; i < els.length; i++) {
  els[i].addEventListener('mouseup', function() {
    this.value = getSelection(this);
  })
}

<table>
  <tr>
    <td>Test code 1</td>
    <td>
      <input type='text' id='input1' class="selection" />
    </td>
  </tr>
  <tr>
    <td>Test code 2</td>
    <td>
      <input type='text' id='input2' class="selection" />
    </td>
  </tr>
</table>