Display popup above highlighted text in contenteditable div? - javascript

I'm building a simple blogging-esque feature into one of my apps, and use the HTML5 contenteditable attribute because it's clean. However, what I need to do now is when the user highlights some text in the contenteditable div, a popup needs to appear above it. Right now I have a function that gets the selected text, which is binded to the DIV's mouseup(). However, when I click into the contenteditable div, the function is fired.
Here's my code:
function getSelected() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.getSelection) {
return document.getSelection();
}
else {
var selection = document.selection && document.selection.createRange();
if (selection.text) {
return selection.text;
}
return false;
}
return false;
};
$("#content-create-partial").bind("mouseup", function(){
var text = getSelected();
if(text) {
console.log(text);
}
else{
console.log("Nothing selected?");
};
});
How do I prevent the call from being fired when the user clicks into the contenteditable div, and only when they highlight some text?

$("#content-create-partial").bind("mouseup", function(){
if (document.getSelection) {
var text = getSelected();
if(text) {
console.log(text);
}
else{
console.log("Nothing selected?");
}
}
});

Convert it to a string (.toString()), use trim() in case the selected string is empty and in the mouseup event check the length of the selected string.
$("#content-create-partial").bind("mouseup", function(){
var text = getSelected().toString().trim();
if(text.length>0) {
console.log(text);
}
else{
console.log("Nothing selected?");
};
});

Related

Trigger event on double click on a word, javascript React.js

I have a component in Reactjs. This has a p tag. Inside that there is text.
I want that when ever user double click on any word, it should trigger a function, in which I get the selected text, so that I can save that word in an array.
Please help.
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
This should work for all browsers. Attach it to mouseup of your p tag.

Get selection string in IPAD

I have a text area in which we have some text and a "touchend" event bind on this textarea. But while selecting text on Ipad it works only for it for first time touched select but if I am extending the selection part It will not return the selection string.
I want to return a string as I do selection of string. Below is the Link which I have prepared.
https://jsfiddle.net/22gc6gu4/63/
Any suggestion or help.
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
$(document).ready(function (){
$('textarea').on(" touchend", function (e){
$("#textUpdate").text(getSelectionText());
})
});

Determine if dom element contains a highlighted text

In my web app, I am trying to implement different behaviors for click and mouseup events for text elements. On a mouseup event, I check if there is a selected text and do something with it. On a click event I do something else, like navigating somewhere regarding clicked text. If there is a selected text, however, I won't execute the code on click event and this is the part I got stuck. Here is a modal of what I am doing now:
//the function that returns selected text as string
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function onMouseUp(event) {
var selection = getSelectionText();
if (selection != "") {
alert("Selected text: " + selection);
}
}
function onClick(event) {
alert("You clicked the text.");
}
<body>
<h2 onclick="onClick(); return false;" onmouseup="onMouseUp(); return false;">
text to click or select
</h2>
</body>
I want to do something like this in the onClick handler
function onClick(event)
{
if ( !hasSelectedParts(this) ) // want to implement hasSelectedParts() function
{
alert("You clicked the text.");
}
}
How can I implement that hasSelectedParts(domElement) function? That is,
is there a simple way of detecting whether a dom element has some selected parts in it.
Thanks for any help in comments. Here is what I came up with:
function hasSelectedContend(element)
{
var selection = window.getSelection();
return !selection.isCollapsed // selection data is about currently highlighted text
&& selection.anchorNode !== null // there is a selection
&& selection.anchorNode.parentNode === element; //selection is in the element
}

Dynamically update selected text in particular HTML element

I'm trying to dynamically update a text selection in a particular HTML element. To this end, the link function contains
element.on('mouseup', function(event) {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
(Partly taken from https://stackoverflow.com/a/5379408/353337). This works well when clicking around and selecting text within element.
The problem with this is that the mouseup event is only intercepted on the particular element. If I click anywhere else on the page, the text in the element is deselected as well, of course, but the event never fires.
How can I make sure that text always contains the selected text in element?
I think you have to listen on the whole document for the event.
JSFiddle
To check if the marked word is part of the word (or the same) I used the indexOf function, which returns 0 if the word is equal or 1 if it is part of the word. So I compared to greater or equal 0.
$(document).on('mouseup', function (e){
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
var elementText = $(".element").text();
if(elementText.indexOf(text) >= 0) {
alert(true);
}
else {
alert(false)
}
});

detect what is copied from webpage with jquery

I have a question about jquery.
I know we can detect copy with jquery like this :
$("#textA").bind('copy', function() {
$('span').text('copy behaviour detected!')
});
$("#textA").bind('paste', function() {
$('span').text('paste behaviour detected!')
});
$("#textA").bind('cut', function() {
$('span').text('cut behaviour detected!')
});
But , i want to know what is exactly copied ?
for example, user copy the value of one box, i need to get and have that value .
How to do this with jquery?
You can use this
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
$(document).keypress("c",function(e) {
if(e.ctrlKey)
alert(getSelectionText());
});
this should be work

Categories