Get selection string in IPAD - javascript

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());
})
});

Related

How to create a popup/overlay upon highlighting words like Google Dictionary extension?

I want to create a in-window popup when some text is highlighted, similar to how the Google Dictionary extension works. I've already figured out how to do the highlighting portion, just can't figure out how to create the popup.
Here's the code for the highlighting:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
console.log(text);
}
document.onmouseup = function() {getSelectionText()};

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.

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