CODEWITHSUNDEEP
javascript
kritika goyal
kritika goyal

Reputation: 45

set the cursor at the end of the string?

When I replace a string with another, the cursor is moved to the beginning of the string in the text. Can the cursor be moved at the end instead of the start of the string?

index.jsp:

var val1=request.responseText;
var text=document.getElementById("para").innerHTML;
if(val1!="true")
{
    var afterplace=text.replace("good",val1);
    document.getElementById("para").innerHTML=afterplace;
}

After replacement the cursor come at the start of the word I want it at the end.

Upvotes: 4

Views: 315

Answers (2)

napster
napster

Reputation: 369

Use this code:-

var val1=request.responseText;
var text=document.getElementById("para").innerHTML;

if(val1!="true"){
    var afterplace=text.replace("good",val1);
    document.getElementById("para").innerHTML=afterplace;
    document.getElementById("para").focus();
    var val = document.getElementById("para").value;
    document.getElementById("para").value = '';
    document.getElementById("para").value = val;
}

It works fine for me.

Upvotes: 0

Manwal
Manwal

Reputation: 23826

Consider following function for setting cursor at end of contenteditable element:

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false);
        range.select();
    }
}

Working DEMO

Full snippet:

var val1="testingtextgood";
var text=document.getElementById("para").innerHTML;
if(val1!="true")
{
    var afterplace=text.replace("good",val1);
    document.getElementById("para").innerHTML=afterplace;
    document.getElementById("para").focus()
    setEndOfContenteditable(document.getElementById("para"))
}

function setEndOfContenteditable(contentEditableElement)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false);
        range.select();
    }
}

Upvotes: 1

Related Questions