Move keyboard caret to end of contenteditable child paragraph?

So I have some XHTML that looks like this...

<div contenteditable="true" id="editor_test">
<p tabindex="3">here is some text</p>
<p tabindex="3">here is some text</p>
<p tabindex="3">here is some text</p>
</div>

The problem is when the last element before the editable divisible element is blurred focus is given to the divisible element with the keyboard caret. This inserts the keyboard caret before the first paragraph[0] meaning text can be entered outside of a paragraph where it does not belong in Firefox however it works as desired in Chrome and Opera. The presence of line breaks within the editable divisible element does not seem to have any effect.

Incorrect Caret Position

<div contenteditable="true" id="editor_test">*****HERE*****<p tabindex="3">here is some text</p>

Desired Caret Position

<div contenteditable="true" id="editor_test"><p tabindex="3">here is some text*****HERE*****</p>

With JavaScript I can set the keyboard caret position in a text field as so...

function caret_position(id)
{
 var d = document.getElementById(id);
 d.focus();
 d.selectionStart = d.value.length;
 d.selectionEnd= d.value.length;
}

caret_position('id_of_form_field');

Here is my attempt to make it work with paragraph elements...

function caret_position_p(i)
{
 var a = document.getElementById('editor_test').getElementsByTagName('p')[i];
 a.focus();
 a.selectionStart = a.firstChild.nodeValue.length;
 a.selectionEnd = a.firstChild.nodeValue.length;
}

caret_position_p(0);

However this does not work with paragraph elements. I'm trying to avoid having the user type text outside of a paragraph and unfortunately everyone in the search results seems to be asking to do the opposite which is semantically incorrect. Right now I'm just trying to get this to work in standards compliant browsers, if I can't get that far I won't even bother to think about wasting time in IE. Thoughts please?

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="text/javascript">
//<![CDATA[
var savedRange,isInFocus;

function saveSelection()
{
 if (window.getSelection)
 {
 savedRange = window.getSelection().getRangeAt(0);
 }
 else if (document.selection)
 {
 savedRange = document.selection.createRange();
 }
}

function restoreSelection()
{
 isInFocus = true;
 document.getElementById("area").focus();

 if (savedRange != null)
 {
 if (window.getSelection)//Standards
 {
 var s = window.getSelection();

 if (s.rangeCount > 0)
 {
 s.removeAllRanges();
 s.addRange(savedRange);
 }
 }
 else if (document.createRange)//non IE and no selection
 {
 window.getSelection().addRange(savedRange);
 }
 else if (document.selection)//IE
 {
 savedRange.select();
 }
 }
}

//this part onwards is only needed if you want to restore selection onclick
var isInFocus = false;
function onDivBlur()
{
 isInFocus = false;
}

function cancelEvent(e)
{
 if (isInFocus == false && savedRange != null)
 {
 if (e && e.preventDefault)
 {
 //alert("FF");
 e.stopPropagation(); // DOM style (return false doesn't always work in FF)
 e.preventDefault();
 }
 else
 {
 window.event.cancelBubble = true;//IE stopPropagation
 }
 restoreSelection();
 return false; // false = IE style
 }
}
//]]>
</script>
</head>

<body>

<textarea style="border: #000 solid 1px;"></textarea>

<div id="area" style="border: #000 dotted 1px; width:300px;height:300px;" onblur="onDivBlur();" 
onmousedown="return cancelEvent(event);" onclick="return cancelEvent(event);" 
contentEditable="true" 
onmouseup="saveSelection();" onkeyup="saveSelection();" onfocus="restoreSelection();"><p>111</p><p>222</p><p>333</p></div>

<textarea style="border: #000 solid 1px;"></textarea>

</body>
</html>

function keydown_test()
{
 if (!bb_containsNode('editor_test','p'))
 {
 if (document.getElementById('editor_test').getElementsByTagName('p')[0])
 {
 var p = document.getElementById('editor_test').getElementsByTagName('p')[0];
 p.focus();
 window.getSelection().extend(p,0);
 }
 else
 {
 var p = document.createElement('p');
 p.setAttribute('tabindex','3');
 document.getElementById('editor_test').appendChild(p);
 keydown_test();
 }
 }
}

function bb_containsNode(id,n)
{
 var a = document.getElementById(id).getElementsByTagName(n);
 var l = false;
 for (var i=0;i<=a.length;i++) {if (window.getSelection().containsNode(document.getElementsByTagName(n)[i],true)) {l = true; break;}}
 return l;
}

Move keyboard caret to end of contenteditable child paragraph?

Code works fine with a form field, not with editable non-form elements.

JAB Creations

coopster

Fotiman

JAB Creations

JAB Creations

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week