JavaScript Selection/Range Problem [modified]
-
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
-
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
Hello I have worked on the same error earlier, but unfortunatly there is no way you can disable the keypress event in Firefox, Safari, etc. You can capture KeyPress events but they can only be controlled in IE. I am sorry, i cannot help you on this topic.