Selected Text Event Trigger in JavaScript

Selected text event trigger in Javascript

There is no "Text was selected" (DOM) event, but you can bind a mouseup event to the document.body. Within that event handler, you might just check the

document.selection.createRange().text

or

window.getSelection()

methods. There are several topics on Stackoverflow, like this one javascript to get paragraph of selected text in web page.

I'm not sure what you mean with "finding the position", but to stay in my example world you could use the event propertys for X+Y mouse positions.

Example: http://www.jsfiddle.net/2C6fB/1/

Trigger function on input event if selected text is within input

This answer is not about text selection at all.

But still solve your problem to refilter text when highlighted text is being replaced with new input.

var input = document.getElementById('ok');var character = document.getElementById('char');var previousCount = 0;var currentCount = 0;
input.addEventListener('input', function(){    currentCount = this.value.length;    if (currentCount <= previousCount){        /*            This will detect if you replace the highlighted text into new text.            You can redo the filter here.        */        console.log('Highlighted text replaced with: ' + this.value);    }    previousCount = currentCount;    char.innerHTML = this.value;});

<input type="text" id="ok">
<div id="char"></div>

Trigger a function on selection of text from textbox

Assuming your textbox is a HTML textarea, you define the select event handler as follows in your template (here it points to the onTextSelected method from your component class).

<textarea #textbox (select)="onTextSelected()">{{ text }}</textarea>

In your component class, you should get a reference to the textare by the use of the @ViewChild decorator. Then you need to implement the onTextSelected method.

@ViewChild('textbox', { static: false}) textAreaRef: ElementRef<HTMLTextAreaElement>;

onTextSelected(): void {
  const textArea = this.textAreaRef.nativeElement;
  this.selectedText = textArea.value.substring(textArea.selectionStart, textArea.selectionEnd);
}

Please have a look at the following StackBlitz.

In case you really want to call the method with the selected text, you can change your template as follows and get rid of @ViewChild at the same time.

<textarea #textbox (select)="onTextSelected(textbox.value.substring(textbox.selectionStart, textbox.selectionEnd))">{{ text }}</textarea>

This is is shown in the following StackBlitz

Handler for when text is selected

There is no event for selection, but you can use document.getSelection to access text that may be currently selected. You can bind a handler to onmouseup or onkeyup, etc.

Is it possible to fire any function when text selected without mouseup?

The DOM API has the selectionchange event for that:

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

Unfortunately an even listener for that event can only be attached to the document object, and not to any specific element.

So what you can do is attach the listener in the mounted() hook:

mounted() {
   document.addEventListener('selectionchange', this.handleSelectionChange);
}

I've created a small sample project showing the usage. Unforunately the event target is always document.

https://codesandbox.io/s/kmxp4roz97

Why is trigger() triggering the select() handler 3 times?

A select needs a prevent default if you wish to stop it at some point.
the select event isn't the focus event, when a field becomes in focus. The select event gets fired when something is selected.

When you trigger the select event with the below code and have the browser tools open, you will see that the debugger shows the below code. When you select call stack -> dispatch, you can see what triggered the event and see that the third event is triggered by a native event.

var count = 0;
$("#select-test").select(function(e){
    if(count == 2) {
       debugger;
    }
    count++;
    console.log("selected")
})

$("#newTest").click(()=> {
    count = 0
    $("#select-test").trigger("select")
})

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<button id="newTest">TEST ME</button>
<input type="text", id="select-test" value="some">

Selecting text in ionic should trigger an event ? how?

To get Selected text you can use:

window.getSelection().toString()

Check Working Stackblitz:

---

Related Topics