Ответ Caramba работал довольно хорошо, однако у меня была проблема, что, если вы выбрали какой-то текст и выпустили мышь за пределы области текста , событие не сработало.
Чтобы решить эту проблему, я изменил исходное событие на mousedown
, это событие регистрирует mouseup
событие в документе, чтобы оно срабатывало после отпускания курсора. mouseup
Событие затем удаляет себя после того, как он выстрелил.
Это может быть достигнуто с помощью добавления once
опции addEventListener
, но, к сожалению, не поддерживается в IE11, поэтому я использовал решение во фрагменте.
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>