javascript - javascript - 在表格单元格中选择文本并自动填充同一行的输入

Question

现在我正在使用 document.onmouseup 事件来选择文本。但我只能在我的代码中指定一个输入。如何选择第一行中的文本并将其放入第一行的输入中，并为第二行做同样的事情？

代码片段在这里（来自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

我从这里ShowSelection()使用了函数。

您可以将公共类添加到inputs您想要此功能的位置。此外，您必须将mouseup事件附加到所有输入。请参阅下面的解决方案。

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>