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 TD
s 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
R Networkd3 Package: Node Coloring in Simplenetwork()
Shiny App:Disable Downloadbutton
Difference of the Value, Prototype and Property
Non-Blocking Settimeout in JavaScript VS Sleep in Ruby
Can Mustache Templates Do Template Extension
Explanation of [].Slice.Call in JavaScript
Linguistic Meaning of 'Let' Variable in Programming
Why Is It Frowned Upon to Modify JavaScript Object's Prototypes
JavaScript Read File Without Using Input
Weird JSON JavaScript Problem in Rails
Access JavaScript Property Case-Insensitively
Losing "This" Context in JavaScript When Passing Around Members
Bitwise or in Ruby VS JavaScript
How to See Ping Pong in Web Socket in iOS
The .Replace() Method Does Change the String in Place