Develop Reference

Saving highlighted text to a string

I'm making a web application that splits the screen into two windows, with one side a web based text editor and the other side just a normal window.
I am trying to find a way to be able to have a user highlight some text on the browser side and then auto-save the highlighted text into a string where I would then be able to manipulate the string.
Does anybody have any ideas? Any help would be greatly appreciated.

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 (){
$('div').mouseup(function (e){
alert(getSelectionText())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Hello, this is a highlight text test
</div>

So you'll have two steps here.
Capture the mouseup event.
Return the selected text.
Whatever text is selected on the document can be accessed via the js call:
window.getSelection()
But this is browser specific. So you can use this code snippet to cover grabbing the selected text from all browsers.
function getSelectedText () {
var txt = ''
if (window.getSelection) {
txt = window.getSelection();
} else if (document.getSelection) {
txt = document.getSelection();
} else if (document.selection) {
txt = document.selection.createRange().text;
}
return txt;
}
I assume you are using a library like jQuery. So that can help with the mouseup events. You probably don't want to capture selections on the whole document. So you could bind to whatever element you need. Something like my jsfiddle here: http://jsfiddle.net/xh799/

How to unselect the text of a textbox when it gets focus, when tab is pressed?

I have a series of text boxes in a row, which are used to enter time. When the user comes back to an already edited text box, the browser highlights the text within that textbox.
How would I un-select the text in it when the text box gets the focus, and
Set the cursor to the beginning of the text within the text box?
I have tried the following ways but for no good:
In textboxfocushandler:
var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);
Select handler for textbox:
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection && document.selection.empty) { // IE?
document.selection.empty();
}

I think the problem is that the browser doesn't select the text until after the focus handler has executed. You could try using setTimeout() to delay your code, like this:
$('input').focus(function() {
var $input = $(this);
setTimeout(function() {
setCaretPos($input[0], 0, 0);
}, 0)
});
jsfiddle demo
This uses the following method to set the caret position.
function setCaretPos(element, begin, end) {
if (element.setSelectionRange) {
element.setSelectionRange(begin, end);
} else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
range.select();
}
}
If you decide you want the focus at the end of the text, you can use:
var end = $input.val().length;
setCaretPos($input[0], end, end);
Credit:
I got the code for the setCaretPos() function from the jQuery mask plugin. That plugin contains a .caret() plugin method that you could use instead.

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: getting text selection does not work in Chrome?

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

Javascript functions return lines of function code or "{[native code]}," what am I doing wrong?

I am writing some code to find the user selection in a contenteditable div, I'm taking my code from this quirksmode article.
function findSelection(){
var userSelection;
if (window.getSelection) {userSelection = window.getSelection;}
else if (document.selection){userSelection = document.selection.createRange();} // For microsoft
if (userSelection.text){return userSelection.text} //for Microsoft
else {return userSelection}
}
I'm testing it in Chrome and Firefox, if I do an alert(userSelection) within the function or an alert(findSelection();) outside the function, it returns function getSelection() {[native code]}. If I do console.log(findSelection();) it gives me getSelection(). Is there something I've done wrong?

getSelection is a function... you need to execute it to get the selection?
if (window.getSelection) {userSelection = window.getSelection();}

Change it to
  if (window.getSelection) {userSelection = window.getSelection();}
(getSelection())

This is to get the text of the selection. Even with the typo fixed, you've got inconsistent behaviour: IE is returning the selection's text as a string while other browsers will return a Selection object that will give you the selection text string only when its toString() method is called.
The following would be better:
function getSelectionText(){
if (window.getSelection) {
return "" + window.getSelection();
} else if (document.selection && document.selection.createRange) {
return document.selection.createRange().text;
}
}