How to Preserve and Obtain Text Selection in Textboxes Using JavaScript?

Acquiring Selected Text from a Textbox Using JavaScript

Implementing a Selection Preservation Mechanism

Query:

How can I retain text selection within a textbox, even after interacting with other controls?

Solution:

To preserve textbox selection across clicks on other elements, employ the following approach:

1. Utilize the onKeyDown event of the document to invoke a function that reads the selected text when a key is pressed.
2. In the selection-reading function, leverage the focus() method to restore focus to the textarea, ensuring the selection remains active.

document.onkeydown = function (e) { ShowSelection(); }

Obtaining Selected Text from a Textbox

Query:

How can I programmatically obtain the text that has been selected within a textbox?

Solution:

To retrieve the selected text from a textbox, follow these steps:

1. Identify the textbox element using the getElementById function.
2. Utilize the selectionStart and selectionEnd properties to determine the start and end positions of the selected text.
3. Extract the selected text by using the substring method.

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  {
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  {
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

The above is the detailed content of How to Preserve and Obtain Text Selection in Textboxes Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!