javascript - highlight the content within a table cell and automatically populate the input field on the corresponding row

Question

javascript - highlight the content within a table cell and automatically populate the input field on the corresponding row

Currently, I am using the document.onmouseup event to select text. However, my code only allows me to specify one input. How can I modify it to select text from the first row and place it into the input in the first row, and do the same for the second row?

The following is the code snippet (source: On Text Highlight Event?):

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

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

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

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

javascript highlight onmouseup

Answer 1

Answer №1

After implementing the ShowSelection() function found here, I was able to achieve the desired functionality.

To enable this feature on specific inputs, simply assign a common class to those inputs and ensure that you attach the mouseup event to all of them. The solution provided below outlines the necessary steps:

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>

Answer 2

After implementing the ShowSelection() function found here, I was able to achieve the desired functionality.

To enable this feature on specific inputs, simply assign a common class to those inputs and ensure that you attach the mouseup event to all of them. The solution provided below outlines the necessary steps:

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>

javascript - highlight the content within a table cell and automatically populate the input field on the corresponding row

Answer №1

Similar questions

Angular 5 Service Unit Testing for UPDATE Function

Tips for submitting an AJAX form in grails without relying on a traditional submit button

Highcharts - problem with chart width being fully rendered

First, the image is reduced by width until it reaches its maximum width, then the height is adjusted proportion

`Is it possible to place div elements on the left and right sides of another div element?`

A guide on detecting overflow in a React functional component

unable to bypass mongoose nested documents

The integration of Angular and Node API within the IISNode directory structure is experiencing functionality issues

Adding style to freshly generated content with class inclusion

Obtain data from files within a React frontend application

The ng-view directive appears to be missing in the AngularJS framework

ng-repeat does not update model when using track by

Integrating jQuery Tooltip with Mouseover Event

I just made an ajax call. Now, how should I proceed with formatting the data that was returned

Retrieving intricate JSON data from a specific web address

Instructions for sorting an array of objects by Firebase Timestamp

Issue: 040A1079 - Failure in RSA Padding Check with PKCS1 OAEP MGF1 Decoding Error Detected on Amazon Web Services

Using Sequelize to update all values in a JSON file through an Express router.put operation

Updating the opacity of the alphaMap in THREE.JS R76 does not cause the desired change

Difficulty in detecting the collision between the character and the border in the game