can you get the cursor position in a contentEditable field?

[dayfrank]

New dilemma. I am overriding IE's default insert-new-paragraph-tag-when-return-is-pressed functionality.

the code below takes the following innerHTML (<p>Test page.</p>) and gives <p>Test page.<br></p> on the first carriage return.

if a second carriage return (in a row) is fired, then i remove the <br> tag and let IE's default behavior run, which inserts a new paragraph.

However, I need to only remove the br tag if the user's cursor is next to the br tag. Is there any way to know this?

<!-- here's my code -->
...
<script language="javascript" type="text/javascript">
var lastKeyStroke = false; //tracks whether last key stroke was a return
function handleOtherKeystrokes() {
var e = window.event;
switch(e.keyCode) {
case 9: //tab key
lastKeyStroke = false;
with(e){
cancelBubble = true;
returnValue = false;
}
range(1).pasteHTML("<span class='tab'></span>");
break;
case 13: //return key
if (!lastKeyStroke) {
lastKeyStroke = true;
/* insert my own BR tag instead */
range(1).pasteHTML("<br />");
/* hack fix for not moving cursor to next line right away */
e.keyCode = 40; //force arrow down in the editor to show the line break right away
/* end hack */
} else {
/* this is the second br tag in a row, so we will remove the first br and insert a new paragraph, but ONLY IF USER'S CURSOR IS NEXT TO THE BR TAG!
c_prepareToInsertNewParagraph();
lastKeyStroke = false;
}
break;
default:
//do nothing
lastKeyStroke = false; //last key wasn't a return
break;
}
}

function c_prepareToInsertNewParagraph() {
//this removes a br tag inside a p tag (if cursor is after the br tag) and allows the default onkeydown event to create a new p tag
var x = document.selection.createRange(); //get reference to spot in document
if (x.parentElement().tagName == "P") {
if (x.parentElement().lastChild.tagName == "BR") {
//this needs to happen only if user's cursor is immediately after this last child (the br element)
x.parentElement().lastChild.removeNode(true);
}
}
}
</script>
...
<div id="aiEdit" class="AIEditor" onkeydown="javascript:handleOtherKeystrokes();" tabindex="1" contentEditable="true"></div>

<!-- end code -->

any help is greatly appreciated.

thanks.

[enumerator]

This may not be what you want, but FYI, the DHTML Edit Control has a property (UseDivOnCarriageReturn), which can be duplicated in a contenteditable element by nesting an empty <div></div> within it... no scripting required.