We Keep Coding

Is there any solution to identify <a> tag range to appear the cursor just after the end of all <a> tag

Could you please check https://jsfiddle.net/s7fxy8jp/8/
Is there any solution to identify tag range so that when I click on "Set Focus To Element Z" from the fiddle, the cursor will appear just after the end of all tag.
HTML
<div tabindex="-1" id="scripted"><a>Element A (script-only focusable)</a><a>Element B (script-only focusable)</a></div><div id="test">Set Focus To Element Z</div>
CSS
div:focus {
background-color: Aqua;}
JS
document.getElementById('test').onclick = function () {
document.getElementById('scripted').focus();};

For the cursor to appear, I believe the div must be contentEditable. You could change the attribute onClick to only make it editable after the script activates it.
Once editable you can set the selection to place the cursor position.
function cursorToEnd(el) {
var range = document.createRange();
var sel = window.getSelection();
// Note positioning after the last child works for your
// example but might not be the most robust option depending
// on your expected div contents.
range.setStartAfter(el.lastChild);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
document.getElementById('test').onclick = function () {
var e = document.getElementById('scripted');
e.contentEditable = true;
cursorToEnd(e);
};
jsFiddle

Here is this, but you won't be able to see cursor at the end because i am not converting that div into text box.
document.getElementById('test').onclick = function () {
document.getElementById('scripted').focus();
placeCaretAtEnd( document.getElementById("scripted") );
};
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();
}
}
div:focus {
background-color: Aqua;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div tabindex="-1" id="scripted"><a>Element A (script-only focusable)</a><a>Element B (script-only focusable)</a></div>
<div id="test">Set Focus To Element Z</div>

HTML JS Text editor

i am trying to create a very simple html text editor.
i have utilised the context menu function to have different format options once a user selects on the highlighted text on screen will have a span tag appended to it.
this is what i have.
function StyleChange(property) {
var span = document.createElement("span");
span.style.color = property;
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
this works fine for changing the colour of the highlighted text.
what i would like to do is be able to use this function to change any format of style for the text by passing an extra parameter when the function is called.
so when it is called it will say something like. StyleChange('color',red) or StyleChange('background','yellow').
something like
function StyleChange(style,property) {
var span = document.createElement("span");
**span.style. + style = property;**
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}
i get an error message with this any ideas?

Square brackets are used to pass properties, like:
function StyleChange(property, value){
var span = document.createElement('span');
span.style[property] = value;
if(window.getSelection){
var sel = window.getSelection();
if(sel.rangeCount){
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
}

You probably want
span.style += property;
instead.
Another consideration: you don't want to use the name property for your variable, since that's a reserved keyword (as you can see since it's highlighted in blue) and Bad Things™ will happen if you use one.

Select text on click for <code> box

I've used this solution to select the text content for a code box using the code tag.
Jason's Answer which is the following:
function SelectText(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
$(function() {
$('span').click(function() {
SelectText('selectme');
});
});
This is my code box:
<div class="codebox"><span>{L_CODE}: {L_SELECT_ALL_CODE}</span><div id="selectme"><code></code></div></div>
The problem is that when there are multiple code boxes in the same page, only the first one is selected because of the ID being the same.
How can I use a dynamic way so that when the users clicks to select the desired text, the clicked container will be selected regardless of how many boxes are present?

First of all, you should never have more than one element using the same ID (use the attributes CLASS or DATA for this purpose).
Then you just need to do:
$(".class").click(function(element) {
// Do crazy stuff with element
})
Or with the data attribute:
$("data[foo='blah']").click(function(element) {
// Do crazy stuff with element
})

Select asp:Label text on click event

I have a label on my page and want to select the text of this label whenever user click on it so it will be easier for user to Ctrl+C text on this label.
I tried using SomeLabel.Attributes["onclick"] = "javascript:this.select();"; but it didn't work.
Is there any way to do this?

Try this:
function fnSelect(objId) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
SomeLabel.Attributes["onclick"] = "javascript:fnSelect(" + SomeLabel.ClientID + ");";

Try This one
SomeLabel.Attributes.Add("onclick","javascript:fnSelect('" + SomeLabel.ClientID + "');");

How to add the <span> by javascript? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to use the Javascript to add/remove the CSS/colour style to the html page?
I have a question on the HTML and javascript. I got the following paragrahe.
function add_span(){
// ??
}
<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>
Is it possible to have the following result after the user
select the highlighted text by mouse
click the button
e.g.
highlight the 'statement1,'
click the button
Expected Result:
<input tupe="button" onclick="add_span()" value"add span"/>
<p> <span class="ABC">statement1,</span> statement2, statement3 </p>
##### Updated Code, but no work
// updated code in the add_span
var selectedText;
if (window.getSelection)
{
selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
selectedText = document.getSelection();
}
else if (document.selection) // IE 6/7
{
selectedText = document.selection.createRange().text;
}
//create the DOM object
var newSpan = document.createElement('span');
// add the class to the 'spam'
newSpan.setAttribute('class', 'ABC');
document.getElementById('text').appendChild(newSpan);
var selectedTextNode = document.createTextNode();
newSpan.appendChild(selectedTextNode);

You can get selected text from #Pezhvak IMV's answer:
var selectedText;
if (window.getSelection)
{
selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
selectedText = document.getSelection();
}
else if (document.selection) // IE 6/7
{
selectedText = document.selection.createRange().text;
}
To add a element, you have to create a DOM node, set its attributes and add the element:
Create a DOM node:
var newSpan = document.createElement('span');
Set the class
newSpan.setAttribute('class', 'ABC');
Add the span to under the <p> (The <p> should have a id or some mechanism of identifying it:
<p id="text">
Add the <span> to under the <p>
document.getElementById('text').appendChild(newSpan);
And set the text
newSpan.innerHTML = selectedText;
You can also use createTextNode (alternative for step 5)
var selectedTextNode = document.createTextNode();
newSpan.appendChild(selectedTextNode);

To answer part of you question:
function getSelText() {
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection) // FireFox
{
txt = document.getSelection();
}
else if (document.selection) // IE 6/7
{
txt = document.selection.createRange().text;
}
else return; document.aform.selectedtext.value = txt; }