Develop Reference

How do I add onclick="select_all(this)" dynamically with javascript/jquery?

So I found this awesome possum that makes it possible to select_all the text in a span tag:
<script type="text/javascript">
function select_all(el) {
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
}
}
</script>
<span class="select-all" onclick="select_all(this)">This text becomes selectable</span>
Here's the fiddle
My question is, how might I be able to dynamically add the inline javascript to all span tags with the select-all class? I'm still a newbie with javascript and so I couldn't seem to find anything that mentioned how to do this (that or it confused me).

This is how you create a click event handler for all the existent elements having select-all class:
$(".select-all").click(function() {
//do something
});
This is how you define an event handler for all the existent spans having select-all class:
$("span.select-all").click(function() {
//do something
});
This is how you define an event handler for all the existent and future elements having select-all class:
$("body").on("click", ".select-all", function(e) {
//do something
});
This is how you define an event handler for all the existent and future spans having select-all class:
$("body").on("click", "span.select-all", function(e) {
//do something
});
If you want a specific event handler for all existent and future spans having select-all class inside a container, having a selector, then this is how you do it:
$(selector).on("click", "span.select-all", function(e) {
//do something
});
Note, that selector is "body" in the worst case.

You can do something like this
$('document').ready(function(){
$('.select-all').click(function (el) {
if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
}
});
});
Happy Coding.

focus works on IE and Firefox but fail in Chrome

I have this code to place focus on an element (textbox). That works fine in IE and Firefox, but in chrome, not work :/
I'm using JS without jQuery (Mandatory for the project) and VB.NET
Suggestions? :)
Thx
var elem = document.getElementById("<%=txtPesquisa.ClientID%>");
var elemLen = elem.value.length;
// For IE Only
if (document.selection) {
// Set focus
elem.focus();
// Use IE Ranges
var oSel = document.selection.createRange();
// Reset position to 0 & then set at end
oSel.moveStart('character', -elemLen);
oSel.moveStart('character', elemLen);
oSel.moveEnd('character', 0);
oSel.select();
}
else if (elem.selectionStart || elem.selectionStart == '0') {
// Firefox/Chrome
elem.selectionStart = elemLen;
elem.selectionEnd = elemLen;
elem.focus();
}

If you meant to select text in the input box I think you meant elem.selectionStart = 0 instead of elem.selectionStart = elemLen;
Demo http://jsfiddle.net/ygalanter/fmP64/1/
But the focus works in your code as it is and the original code places cursor at the end of the text

Resolved.
The problem wasn't in this function, but elsewhere in the code.
However, I made a slight change to the code be perfect and put the autofocus at the end of the word:
var elem = document.getElementById("<%=txtPesquisa.ClientID%>");
var elemLen = elem.value.length;
// For IE Only
if (document.selection) {
// Set focus
elem.focus();
// Use IE Ranges
var oSel = document.selection.createRange();
// Reset position to 0 & then set at end
oSel.moveStart('character', elemLen);
oSel.moveStart('character', elemLen);
oSel.moveEnd('character', elemLen);
}
else if (elem.selectionStart || elem.selectionStart == '0') {
// Firefox/Chrome
elem.selectionStart = elemLen;
elem.selectionEnd = elemLen;
elem.focus();
}
Thx for the help :)

How to place cursor at the end of text after replacing HTML with jQuery?

I have a contenteditable div and trying to replace <font> tag with <span> tag but after replacing the html using jQuery replaceWith() function cursor defaults to the beginning of the text however I want it at the end of the replacing html.
Here is the DEMO to reproduce the issue. Let me know if there is any problem reproducing the issue.
Here is demo code gist
<div id="test" contenteditable=true>
<p> <font color="blue">Text to be replaced</font> </p>
</div>
<a id="replace" href="javascript:void(null);">replace</a>
JS code
$('#test').focus();
$('#replace').on({
mousedown: function (event) {
event.preventDefault();
},
click: function () {
$('#test').find('font').replaceWith(function () {
return '<span style="color:red">' + 'New Text' + '</span>'
});
}
});
EDIT: Here the problem may sound duplicate but it is indeed different as you see the content gets replaced. I might be replacing the part of that text selected by user and not the entire text. So I need to place the cursor at the end of the html which is replacing the original html.

You can use this function
function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
call it as follows
placeCaretAtEnd( document.getElementById("content") );
EXAMPLE

If you create the <span> element by hand using document.createElement() and keep a reference to it, you can easily place the caret immediately after it.
Demo: http://jsfiddle.net/Gaqfs/10/
Code:
function placeCaretAfter(el) {
el.focus();
if (typeof window.getSelection != "undefined"
&& typeof document.createRange != "undefined") {
var range = document.createRange();
range.setStartAfter(el);
range.collapse(true);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(false);
textRange.select();
}
}
$('#test').focus();
$('#replace').on({
mousedown: function (event) {
event.preventDefault();
},
click: function () {
var span = document.createElement("span");
span.style.color = "red";
span.innerHTML = "New Text";
$('#test').find('font').replaceWith(span);
placeCaretAfter(span);
}
});

Refresh text input to show caret

I have the following fiddle: http://jsfiddle.net/sxAss/
By using the solution posted here I was able to move the caret to the end of the input. The problem that I have is that the input does not refresh to actually show the caret. Instead it shows the beginning of the input. What should I do to actually move the view to the end of the input. I am using Chrome.
function moveCaretToEnd(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}

First focus your input element then call your moveCaretToEnd function
like
$('#button').click(function() {
$('#input').focus();
$('#input').val($('#input').val() + 'StackOverflowTest');
moveCaretToEnd(document.getElementById('input'));
});
Working fiddle

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