Hi, I am working on a custom rich-text editor using contentEditable. When the return key is pressed I am preventing the default action, and inserting a line break tag to ensure that the browser doesn't create a paragraph element. In IE I have this working great, but in Chrome, Safari, and FF the selection doesn't appear to update correctly. The break tag is inserted, but the input caret does not move. For test purposes I have replaced the break with a horizontal rule. Upon pressing enter, the caret should move after the HR element, but it doesn't. window.onload = function(event) { document.observe('keydown', doc_keydown.bindAsEventListener(document)); } function charCode(event) { return typeof event.which !== 'undefined' ? event.which : event.keyCode; } function doc_keydown(event) { var range; var code = charCode(event); switch (code) { case 13: // return if (document.selection) { // IE range = document.selection.createRange(); range.pasteHTML("<hr />"); range.moveEnd("character", 1); range.moveStart("character", 1); range.collapse(false); } else { // FF, Google Chrome range = window.getSelection().getRangeAt(0); range.deleteContents(); var newNode = new Element("hr"); range.insertNode(newNode); range.setStartAfter(newNode); // Doesn't work from here down. range.setEndAfter(newNode); range.collapse(false); } break; default: return true; } event.stop(); return false; }
Some initial text - Edit Me!
Many thanks, Lea Hayes
modified on Friday, October 24, 2008 6:39 AM