Positioning cursor in editable div

Discussion in 'JavaScript' started by firvin, Aug 7, 2006.

0
  1. #1
    Hi,
    I'm involved in developing Syntax highlighter for my website. And i got this piece of code for highlighting syntax of SQL from internet. I'm gonna resuse this piece of code. The problem is that on i type 5 or 6 line. if i try to type in 3 or 4th line(ie.. in the middle.) the cursor get repositioned at the end(It does the colour change for all onkeyup event) . I don want the cursor to go to end but to retain in the same place. i tried several things like createRange etc. I could not reposition it. Any help will be very useful.


    Here is the complete code
    
<html>
<head>
<script>
var sel="";
var insertOffset="";
var currentNode="";

window.onload=doInit;

function doInit(){

// All document elements except the content editable DIV are unselectable.
for (i=0; i<document.all.length; i++)
document.all(i).unselectable = "on";
oDiv.unselectable = "off";
oDiv.innerHTML="";
oDiv.focus();
}

function colorit() {
var tags = {select: 'blue', from: 'blue', where: 'blue', sysdatabases: 'green', 
round: '#ff00ff', len: '#ff00ff', count: '#ff00ff', sum: '#ff00ff', avg: '#ff00ff', "var": '#ff00ff',elsif :'blue',calcdays: 'blue',"if":'blue',"else":'blue'};
var e = window.event;
if ((e.keyCode !== 37) && (e.keyCode !== 39)){
// var beforeQuery = oDiv.innerHTML.replace(/<\/P>/gi, "\U13");
var beforeQuery = oDiv.innerHTML.replace(/(<BR>|\n<P>&nbsp;<\/P>)/g, "\n");

var afterQuery = beforeQuery.replace(/<[^>]+>/g, "");
var inComment = false;
var inDashComment = false;
var inQuota = false;
var newExp = "(";
for(tag in tags){
newExp += "\\b"+tag+"\\b|";
//alert(tag);
}
newExp += "\\-\\-|\\n|\\/\\*|\\*\\/*|\\')";
afterQuery = afterQuery.replace(RegExp(newExp, "gi"),
function(p1,p2,p3,p4){
if(!inDashComment && !inComment && !inQuota && tags[p2.toLowerCase()]){
return "<FONT color="+tags[p2.toLowerCase()]+">"+p2+"</FONT>";
} else {
if (!inComment && p2.substr(0,2) == "--") {
inDashComment = true;
return '<FONT color=#008080>--';
}
if (inDashComment && p2 == "\n") {
inDashComment = false;
return '</FONT>\n';
}
if (!inDashComment && p2 == "/*") {
inComment = true;
return '<FONT color=#008080>/*';
}
if (!inDashComment && p2 == "*/") {
inComment = false;
return "*/</FONT>";
}
if (!inDashComment && !inComment && p2 == "'") {
if(inQuota){
inQuota = false;
return "'</FONT>";
} else {
inQuota = true;
return '<FONT color=#ff0000>\'';
}
}

return p2;
}
});
if(beforeQuery!=afterQuery){
//alert(beforeQuery+"\n"+afterQuery)
oDiv.innerHTML = afterQuery.replace(/\n/g,"<BR>");
//setCursor(currentNode,insertOffset);

}

oDiv.style.color = "#000000";
}
}
</script>
</head>
<body leftmargin=0 topmargin=0 scroll=no >
<img src="code-gutter.png">
<div onKeyUp="colorit();" contenteditable ID=oDiv 
STYLE="position:absolute; top: 0; left: 20; font-family: Tahoma; font-size: 10pt; height:200;background-color:white; color=#000000; overflow:auto; width:90%;">
</div>
</body>
</html>
    Code (markup):

    Regards,
    Firvin
     
    firvin, Aug 7, 2006 IP