Is there a javascript function that will allow me to capture the text that is currently highlighted with the cursor and store it in a variable? I've been trying document.selection.createRange().text but this hasn't been working. Are there any possible alternatives? Here's the code:
function moremagic(){
var output = document.selection.createRange();
alert("I Work!");}
When I run the function, it doesn't make it to the write statement so I know something is wrong.
Ungraciously stolen from another question:
function getSelectedText() {
if (window.getSelection) {
return window.getSelection();
}
else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}
Use this in a "onClick" function or whatever and it will return the selected text in almost any browser.
Yep, you want window.getSelection.
function getSelectedText() {
if (window.getSelection) {
return "" + window.getSelection();
} else if (document.selection && document.selection.type == "Text") {
return document.selection.createRange().text;
}
return "";
}
Related
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()};
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());
})
});
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
Is there a function in javascript to just deselect all selected text? I figure it's got to be a simple global function like document.body.deselectAll(); or something.
Try this:
function clearSelection()
{
if (window.getSelection) {window.getSelection().removeAllRanges();}
else if (document.selection) {document.selection.empty();}
}
This will clear a selection in regular HTML content in any major browser. It won't clear a selection in a text input or <textarea> in Firefox.
Here's a version that will clear any selection, including within text inputs and textareas:
Demo: http://jsfiddle.net/SLQpM/23/
function clearSelection() {
var sel;
if ( (sel = document.selection) && sel.empty ) {
sel.empty();
} else {
if (window.getSelection) {
window.getSelection().removeAllRanges();
}
var activeEl = document.activeElement;
if (activeEl) {
var tagName = activeEl.nodeName.toLowerCase();
if ( tagName == "textarea" ||
(tagName == "input" && activeEl.type == "text") ) {
// Collapse the selection to the end
activeEl.selectionStart = activeEl.selectionEnd;
}
}
}
}
For Internet Explorer, you can use the empty method of the document.selection object:
document.selection.empty();
For a cross-browser solution, see this answer:
Clear a selection in Firefox
This worked incredibly easier for me ...
document.getSelection().collapseToEnd()
or
document.getSelection().removeAllRanges()
Credits: https://riptutorial.com/javascript/example/9410/deselect-everything-that-is-selected
For a textarea element with at least 10 characters the following will make a small selection and then after a second and a half deselect it:
var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;
setTimeout(function()
{
t.selectionStart = 4;
t.selectionEnd = 4;
},1500);
I want to select text thats is on a Html page and make it BOLD, I am using the following Code
<script type="text/javascript" >
function getSelectedText(){
if(window.getSelection){ ;
return window.getSelection().toString();
}
else if(document.getSelection){;
return document.getSelection();
}
else if(document.selection){ ;
return document.selection.createRange().text;
}
}
$(document).ready(function(){
$("*").live("mouseup",
function() {
selection = getSelectedText();
alert(selection);
if(selection.length >= 3) {
$(this).html($(this).html().replace(selection, "<b>" + selection + "</b>") );
}
}
);
});
</script>
This Code works Fine But when the text is in two different paragraphs/ Div or if there is a link between the text then it doesnt seem to work.
How Could i Make it Work ?
If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.
The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.
UPDATE
Fixed to work in IE 9.
function makeEditableAndHighlight(colour) {
var range, sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
function highlightSelection(colour) {
var range;
if (window.getSelection) {
// IE9 and non-IE
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
document.onmouseup = function() {
highlightSelection("red");
};
Live example: http://jsfiddle.net/eBqBU/9/
a=document.getElementById('elementID').innerHTML;
variable 'a' will get the string value of anything inside the element with an id 'elementID'.
Is this ok?
Everything you need (based on your comments) can be found here: http://www.awesomehighlighter.com/webliter.js
I don't have time to extract the relevant parts but take a look for example in Webliter.prototype.highlight (just search for this in that file)
You can also use jQuery for example this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html