JavaScript: getting text selection does not work in Chrome? - javascript

I'm trying extract selected text from the browser window in Chrome, On the following browsers: IE6-9, FireFox & Safari it's works fine. BUT NOT IN CHROME!!!
Here is my code:
$("div-content").bind("mouseup", function () {
var t = '';
if (window.getSelection) { //FireFox, Safari and IE9(*)
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
} else if (document.selection) { //IE6,7,8,9
t = document.selection.createRange().text;
}
});
Anybody knows what is the magic for Chrome?
*Notice that IE9 has 2 possible ways to get the selection: window.getSelection() and document.selection

Related

Problem with programmatically JavaScript copy on iOS 12.2

I have a Phonegap app with the possibility to click a button which will add some text to your clipboard. This has been working up until I upgraded my phone to iOS 12.2.
I have tested on other iPhones with iOS 12.2 and the problem is there too. In the simulator with 12.2 it seems to be working, so I'm not quite sure what the problem is.
I have added the code here so you can see how it's working.
Does anybody know what's wrong?
window.Clipboard = (function(window, document, navigator) {
var textArea,
copy;
function isOS() {
return navigator.userAgent.match(/ipad|iphone/i);
}
function createTextArea(text) {
textArea = document.createElement('textArea');
textArea.readOnly = true;
textArea.value = text;
document.body.appendChild(textArea);
}
function selectText() {
var range,
selection;
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
}
function copyToClipboard() {
document.execCommand('copy');
document.body.removeChild(textArea);
}
copy = function(text) {
createTextArea(text);
selectText();
copyToClipboard();
};
return {
copy: copy
};
})(window, document, navigator);

Highlight word onclick using javascript not working in ipad and iphone

Highlight word onclick using javascript not working in ipad version 9.3.3 and iphone 6. Anyone knows the solution for ios devices. My code is given below.
<div class="collected-item">Text</div>
<div class="collected-item">Text1</div>
$(document).on('click', '.collected-item' , function(event){
event.preventDefault();
self._selectElementText($(this)[0]);
});
**_selectElementText**: function(el) {
if (document.selection) document.selection.empty();
else if (window.getSelection) window.getSelection().removeAllRanges();
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
}
}
It is working in android devices only problem is for ios devices.

Paste event listener on Internet Explorer getting wrong arguments

I'm handling the paste events for a contenteditable to clean all HTML markers before paste. All Works fine in Firefox and Chrome. But when I test my code in IE11, the event object passed is not a ClipboardEvent but a DragEvent.
Is there something wrong with my code?
If I add the listener as the code bellow, should I get the clipboard event. Why I'm getting drag?
editable.addEventListener('paste', pasteHandler, false);
http://jsfiddle.net/vepo/4t2ofv8n/
To test the example above, I'm copy a text from Chrome and paste into IE. But I you copy any text from IE will get the same error.
EDIT
$(document).ready(function(){
var editable = document.getElementById('editable-div');
var pasteHandler = function(e){
if(e.clipboardData && e.clipboardData.getData) {
var pastedText = "";
if (window.clipboardData && window.clipboardData.getData) { // IE
pastedText = window.clipboardData.getData('Text');
} else if (e.clipboardData && e.clipboardData.getData) {
pastedText = e.clipboardData.getData('text/plain');
}
alert(pastedText);
}
else{
alert('Not paste object!');
}
};
editable.addEventListener('paste', pasteHandler, false);
});
here I handle the IE Version and the other browsers as well.
JSFiddle
e.clipboardData was always null for me on IE, so I came up with this:
var pastedText = '';
if (typeof e.clipboardData === 'undefined')
pastedText = window.clipboardData.getData('Text')
else
pastedText = e.clipboardData.getData('text/plain')
e.originalEvent.clipboardData.getData('text/plain') works for safari, chrome, firefox and safari and chrome on an Ipad.
window.clipboardData.getData('text') works for Internet Explorer and Edge.
Note: e.originalEvent.clipboardData.getData('text') works for desktop browsers but not for mobile browsers.
So in the end I used this
var clipText;
if (e.originalEvent.clipboardData !== undefined){
clipText = e.originalEvent.clipboardData.getData('text/plain')
} else {
clipText = window.clipboardData.getData('text')
}
$("element").on('paste', function (e)
{
if (window.clipboardData)
{
pastedText = window.clipboardData.getData('Text')
}
else if (e.clipboardData || e.originalEvent.clipboardData != undefined)
{
pastedText = e.originalEvent.clipboardData.getData('text/plain')
}
}
});

window.getselection is not working in android

I am new to use html+javascript+jQuery. I am trying to use window.getSelection to get selected text but this is not working.
Can any one suggest solution for this.
Thanks in advance.
Just need simple line of code in java script which done your job
//I am using below line of code which works in both android and web browsers.
function getSelectedText() {
var selection = null;
if (window.getSelection) {
selection = window.getSelection();
} else if (typeof document.selection != "undefined") {
selection = document.selection;
}
var selectedRange = selection.getRangeAt(0);
console.log(selectedRange.toString());
}
NOTE : Don't call this method in post or inside any runnable interface as post or any runnable interface make delay in calling this method(Method call happens after browser selection release). Just call this method like
webView.loadUrl("javascript:getSelectedText()");
I know this is a very old question, but I get this as a first search result when I had tried to resolve the same or similar issue. I didn't find a solution here but after some time I realized that sometimes for phones there should be a short timeout between click and selection to make getSelection() work properly.
So e.g. instead this:
document.getElementById("element").addEventListener('click', function (event) {
window.getSelection().selectAllChildren(this)
});
You should use somethink like this:
document.getElementById("element").addEventListener('click', function (event) {
setTimeout(function(passedThis) {
window.getSelection().selectAllChildren(passedThis)
}, 10, this);
});
Maybe it save some time to somebody.
If you want to call a function right after a text selection, you can use the "selectionchange" event:
document.addEventListener("selectionchange", handleSelection);
It's working for android chrome and iOS safari.
Try
function getSelected() {
var text = "";
if (window.getSelection && window.getSelection().toString() && $(window.getSelection()).attr('type') != "Caret") {
text = window.getSelection();
return text;
} else if (document.getSelection && document.getSelection().toString() && $(document.getSelection()).attr('type') != "Caret") {
text = document.getSelection();
return text;
} else {
var selection = document.selection && document.selection.createRange();
if (!(typeof selection === "undefined") && selection.text && selection.text.toString()) {
text = selection.text;
return text;
}
}
return false;
}

Javascript-Android get selected text script

I tried to get selected text from an html page on each touchend event in android device but am not able to get selected text.
Javascript code is :
if(window.getSelection)
{
t = window.getSelection();
}
else if(document.getSelection)
{
t = document.getSelection();
}
else if(document.selection)
{
t = document.selection.createRange().text;
}
Thanks in Advance.
Are you doing this in a webview ?
window.getSelection() returns the Selection object. You can get the text by calling toString()
if( window.getSelection){
t = window.getSelection().toString();
}
If you want to call a function right after a text selection, you can use the "selectionchange" event:
document.addEventListener("selectionchange", handleSelection);
It's working for android chrome and iOS safari (but not for android mozilla and opera).

Categories

Resources