How to get highlighted text position from textarea?
Caramba answer worked pretty great, however I had the issue that if you selected some text and released the mouse outside of the textarea, the event didn't fire.
To solve this i changed the initial event to mousedown
, this event registers a mouseup
event on the document to ensure it fires after the cursor is released. The mouseup
event then removes itself after it has fired.
This can be achieved with adding the once
option to addEventListener
, but sadly isn't supported in IE11 which is why i used the solution in the snippet.
var mySelection = function (element) {
let startPos = element.selectionStart;
let endPos = element.selectionEnd;
let selectedText = element.value.substring(startPos, endPos);
if(selectedText.length <= 0) {
return; // stop here if selection length is <= 0
}
// log the selection
console.log("startPos: " + startPos, " | endPos: " + endPos );
console.log("selectedText: " + selectedText);
};
function addSelfDestructiveEventListener (element, eventType, callback) {
let handler = () => {
callback();
element.removeEventListener(eventType, handler);
};
element.addEventListener(eventType, handler);
};
var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
// register "mouseup" event for those
element.addEventListener('mousedown', function(){
// This will only run the event once and then remove itself
addSelfDestructiveEventListener(document, 'mouseup', function() {
mySelection(element)
})
});
// register "keyup" event for the keyboard
element.addEventListener('keyup', function( event ) {
// assuming we need CTRL, SHIFT or CMD key to select text
// only listen for those keyup events
if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
mySelection(element)
}
});
});
textarea {
resize: none;
width: 50%;
height: 50px;
margin: 1rem auto;
}
<textarea>I am a student and I want to become a good person</textarea>
I would make use of of onselect event to get the same.
<textarea id="input-text" onselect="myFunction(event)">I am a student and I want to become a good person</textarea>
<script>
function myFunction(event) {
const start = event.currentTarget.selectionStart;
const end= event.currentTarget.selectionEnd;
}
</script>
var idoftextarea='answer';
function getSelectedText(idoftextarea){
var textArea = document.getElementById(idoftextarea);
var text =textArea.value;
var indexStart=textArea.selectionStart;
var indexEnd=textArea.selectionEnd;
alert(text.substring(indexStart, indexEnd));
}
getSelectedText(idoftextarea);
This will work for text selection with the mouse and keyboard for all <textarea>
elements on the page.
Change the selector (be more specific) if you don't want all <textarea>
elements to have this text selection.
Read the comments, you will find out there how to disable keyboard selection, if you don't want/need keyboard selection.
var mySelection = function (element) {
let startPos = element.selectionStart;
let endPos = element.selectionEnd;
let selectedText = element.value.substring(startPos, endPos);
if(selectedText.length <= 0) {
return; // stop here if selection length is <= 0
}
// log the selection
console.log("startPos: " + startPos, " | endPos: " + endPos );
console.log("selectedText: " + selectedText);
};
var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
// register "mouseup" event for the mouse
element.addEventListener('mouseup', function(){
mySelection(element)
});
// register "keyup" event for the keyboard
element.addEventListener('keyup', function( event ) {
// assuming we need CTRL, SHIFT or CMD key to select text
// only listen for those keyup events
if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
mySelection(element)
}
});
});
textarea {
resize: none;
width: 50%;
height: 50px;
margin: 1rem auto;
}
<textarea>I am a student and I want to become a good person</textarea>