I have a problem with writing a small CMS with option to add and remove paragraphs by user. In all browsers BACKSPACE button acts a little bit different. What I want to achieve is that user can add paragraph (P) by pressing ENTER and remove P by deleting text with BACKSPACE and I cannot find any good answer for this.
I made this script:
$(document).keydown(function(e){
if ( e.keyCode == 8 && e.target.tagName != 'DIV' ) {
e.preventDefault();
}
});
To prevent deleting newly added paragraphs by pressing BACKSPACE if contenteditable DIV is not focused. Also to avoid navigation previous page issue.
<div class="wrap" contenteditable="true">
<p class="paragraph" id="parg1">
I want BACKSPACE not to delete first P tag - BACKSPACE should delete its text but not P itself.</p>
<p class="paragraph" id="parg2">
second paragraph
</p></div>
Check the code in jsfiddle under FIREFOX
Everything works as I want in CHROME and I would like it to work the same at least in Firefox.
OPERA does almost what I need, only without any reason it adds 2 SPACEs before first letter of the first paragraph if the second paragraph is merged by pressing BACKSPACE. But what is great with these browsers is that they don't delete first paragraph at all.
IE adds some more spaces than OPERA when paragraphs are merged but later it is possible to delete first paragraph - unfortunately.
But what I really need is Firefox to work and it does some crazy things. I want BACKSPACE not to delete first P tag, ever. Otherwise text cursor "falls out" from .paragraph to .wrap. I want always to have first P - BACKSPACE should delete its text but not P itself.
Also if You press BACKSPACE with cursor placed before first letter of second paragraph the P tag is deleted and cursor "falls out" to .wrap. If You will press BACKSPACE again cursor jumps to previous P. But if You will later press ENTER (create new P) and then backspace again, suddenly everything works as it suppose to - cursor jumps into previous P without falling out to .wrap. WHY? I want it to work like that since the very beginning, like it is in Chrome.
Is it somekind of FIREFOX bug? Could it be repaired with jquery?
