On Text Highlight Event

On Text Highlight Event?

There isn't any onhighlightext or anything like that, but a solution would be to bind onmouseup to check if any text is selected if this isn't in a input/textarea.

Edit

Here's an implementation example for you. I only tested this in Chrome/Firefox/IE7. This works in inputs as well.

http://jsfiddle.net/qY7gE/

Code from JSFiddle:

var t = '';function gText(e) {    t = (document.all) ? document.selection.createRange().text : document.getSelection();
document.getElementById('input').value = t;}
document.onmouseup = gText;if (!document.all) document.captureEvents(Event.MOUSEUP);
<input type='text' id='input' />In software, a stack overflow occurs when too much memory is used on the call stack. The call stack contains a limited amount of memory, often determined at the start of the program. The size of the call stack depends on many factors, including the programming language, machine architecture, multi-threading, and amount of available memory. When too much memory is used on the call stack the stack is said to overflow, typically resulting in a program crash.[1] This class of software bug is usually caused by one of two types of programming errors.[2]

Vue text highlight event

OK, try @click.stop on the TDs which stops the event from propagating to the parent TR.

Since you want to preserve the normal row clicking behavior on certain condition, you could add a method for inspecting if any text-selection is being made while clicking and proceed with stopping the event propagation, otherwise invoke the onBagClick() method of the parent TR:

new Vue({  el: '#app',
methods: { onBagClick(id) { alert('Bag Click'); },
checkMouseAction(e) { const isTextHighlighting = window.getSelection().toString().trim() !== '';
if (!isTextHighlighting) { e.target.parentElement.click();
// Or call the this.onBagClick() instead } } }})
table {  border-collapse: collapse;}
table td { border: 1px solid; padding: 10px;}
table td:first-child { background-color: lavender;}
table td:last-child { background-color: pink;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"> <table> <tr @click="onBagClick"> <td @click.stop="checkMouseAction">Selectable text. Left-click and drag these lines with your mouse.</td> <td>Hardly selectable text. An alert dialog will get in the way by popping up.</td> </tr> </table></div>

Making a pop up on text highlight

Have a look at this code

if (!window.x) {
x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
var t = '';
if (window.getSelection) {
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
} else if (document.selection) {
t = document.selection.createRange().text;
}
return t;
}

var pageX;
var pageY;

$(document).ready(function() {
$(document).bind("mouseup", function() {
var selectedText = x.Selector.getSelected();
if(selectedText != ''){
$('ul.tools').css({
'left': pageX + 5,
'top' : pageY - 55
}).fadeIn(200);
} else {
$('ul.tools').fadeOut(200);
}
});
$(document).on("mousedown", function(e){
pageX = e.pageX;
pageY = e.pageY;
});
});

Find here a working demo!
Codepen.io

Javascript for text highlight tooltip in mobile browsers

You can get the bounding rect of the text selection and place the tooltip based on that data. The rect will tell you the width, height, x, y, top, right, bottom, and left of the selection.

document.addEventListener("selectionchange", function(event) {  const selection = window.getSelection();    if (selection.rangeCount === 0) {    return;  }
const range = selection.getRangeAt(0); const rect = range.getBoundingClientRect(); const text = selection.toString(); const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = text; tooltip.style.top = rect.bottom + 5 + 'px'; // 5px offset tooltip.style.left = rect.x + 5 + 'px'; // 5px offset tooltip.style.position = 'absolute'; tooltip.style.background = 'lightgreen';});
This is some text<div id="tooltip">

How to highlight text using javascript

You can use the jquery highlight effect.

But if you are interested in raw javascript code, take a look at what I got
Simply copy paste into an HTML, open the file and click "highlight" - this should highlight the word "fox". Performance wise I think this would do for small text and a single repetition (like you specified)

function highlight(text) {
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0) {
innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;
}
}
.highlight {
background-color: yellow;
}
<button onclick="highlight('fox')">Highlight</button>

<div id="inputText">
The fox went over the fence
</div>


Related Topics



Leave a reply



Submit