When pressing enter in contenteditable in chrome, a div is inserted. This interferes with my markup, I need it to be a br. I know that shift-enter is a br. What is the best way to solve the problem? Thanks. Reformulating the question: How do I trigger shift-enter when someone presses enter? I've tried writing something like this: $(...
It seems it allows you to edit the content of an element, but what is actually happening? What's the use of this property? EDIT: see here ...
I have the following code: <html> <style type="text/css"> DIV { display:inline; border: solid red 1px; } .editable { background:yellow; } </style> <div class="editable" contentEditable="true"> This is test text. This is test text.This is test text.This is test text.This is test text.Thihis is test text.This is test text.</d...
I'm trying to create a textarea that can contain multiple colors. I created a div and in JS did the following: element.unselectable = 'off'; element.contentEditable = true; The div is now editable, but when I click in it, it gets a weird outline. How do I turn this off? ...
I've been searching for this for a couple of days now and so far, the best I can come up with is checking the list below. I really don't like to check for support based on User-Agent, especially since it can be spoofed. I've also heard of at least one instance where the list below is incorrect (noted below). Is Internet Explorer? Is ...
I have a contentEditable div. Let's say the user clicks a button that inserts HTML into the editable area. So, they click a button and the following is added to the innerHTML of the contentEditable div: <div id="outside"><div id="inside"></div></div> How do I automatically place the cursor (ie caret) IN the "inside" div? Worse. How...
I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this? Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off. ...
I'm trying to allow the user to edit a contenteditable div, but am finding that I can't use pasteHTML unless there is some text selected. I thought document.selection.createRange() would return a valid zero-length selection (i.e. a position), but alas no. I've really struggled to find any solution to this that doesn't involve iframes (...
I'm having trouble using contentEditable in FireFox 3. I have a problem where the cursor will appear above or only partially in the div after I click in it (until I start typing at which time it behaves correctly). Any ideas on how I can stop this from happening? HTML: <html> <head><title>Test Page</title></head> <body> <div...
I'm trying to create a very simple contentEditable div input. However, any way that I can think of to get the value of the input is not exactly what the user typed in IE because whitespace is collapsed. i.e. "hello world" becomes "hello world". But it's important to me that I be able to get the text as the user has typed it if at all...
On InternetExplorer, a contentEditable DIV creates a new paragraph (<p></p>) each time you press Enter whereas Firefox creates a <br/> tag. Is it possible to force IE to insert a <br/> instead of a new paragraph ? ...
Can I have such effect in HTML without using an image? The text should be editable with this effect. ...
Hello, I am writing a autocompleter for a content editable DIV (need to render html content in the text box. So preferred to use contenteditable DIV over TEXTAREA). Now I need to find the cursor position when there is a keyup/keydown/click event in the DIV. So that I can insert the html/text at that position. I am clueless how I can fin...
On Internet Explorer, a contentEditable DIV creates a new paragraph (<p></p>) each time you press Enter whereas Firefox creates a <br/> tag. As discussed here, it is possible to use JavaScript to intercept the Enter keyPress and use range.pasteHTML to create a <br/> instead. But doing this breaks the Undo menu; once you hit Enter, you...
Hi, i'm building a simple text editor by setting contentEditable=true on a div (anyway i think that textarea behaves in the same way) and i have some problems with the tab key. What i want is that when the user presses the tab key, the focus remain on the div and a tab character is added to the text. I've solved the first part of the...
I have created a DIV with attribute contenteditable=true and appended children like "span" and "a" with attributes contenteditable=false. Wanted to test if the entire node be deleted with a single backspace and to my surprise Firefox couldnt delete the elements. Also this works as expected in all major desktop browsers except Firefox. An...
Hi, I am trying to get the y coordinate of the cursor within a contenteditable div using getBoundingClientRect(). The IE branch of the code works, but the other branch (i.e. Firefox 3.5 for my current testing purposes) does not. The code below has the problematic lines marked with * in the comment. At that point in the code, both selOb...
My current project involves working with a document editor that, for better or worse, is implemented using mshtml and setting contentEditable to true. We're certainly considering replacing this setup with something else, but for the moment assume it is not an option. In case it matters, we're doing this using VS 2008 (.Net 3.5) & C#: d...
Hi, When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn't look very nice. The border isn't there when focus is somewhere else. How do I remove that border? Thanks ...
I would like to experiment with the following user interface: 1. The content consists of quotes followed by comments. 2. The comments are editable, while the quotes are not. However, quotes should be able to have parts of the quote highlighted, bolded, etc. 3. The entire text (including quotations and comments) should be able to be sele...