How to make an HTML element editable cross-browser?
I found out how. You use the contentEditable property of the DOMElement, like so <div onClick=”this.contentEditable=”true”;”> lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor </div>
contenteditable
contenteditable=false inside contenteditable=true block is still editable in IE8
Okay, I already have discovered the answer much like how Penicillin was discovered. You see, playing around with this code, I mistakenly set contenteditable to true for the span and voila! It worked! So, to make a span NON-contenteditable inside a contenteditable div, you just set its contenteditable attribute to true! <div contenteditable=”true”> Luke, I … Read more
jquery Setting cursor position in contenteditable div
Maybe I’m misreading the question, but wouldn’t the following do (assuming an editable <div> with id “editable”)? The timer is there because in Chrome, the native browser behaviour that selects the whole element seems to trigger after the focus event, thereby overriding the effect of the selection code unless postponed until after the focus event: … Read more
Limiting the number of characters in a ContentEditable div
Pass the event object to your function and call e.preventDefault() if the maximum is reached: var content_id = ‘editable_div’; max = 10; //binding keyup/down events on the contenteditable div $(‘#’+content_id).keyup(function(e){ check_charcount(content_id, max, e); }); $(‘#’+content_id).keydown(function(e){ check_charcount(content_id, max, e); }); function check_charcount(content_id, max, e) { if(e.which != 8 && $(‘#’+content_id).text().length > max) { // $(‘#’+content_id).text($(‘#’+content_id).text().substring(0, max)); … Read more
replace selected text in contenteditable div
The following will do the job in all the major browsers: function replaceSelectedText(replacementText) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(replacementText)); } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.text = replacementText; } }
How to disable elements selection and resizing in contenteditable div?
I spent on this a lot of time myself, when trying to completely hide control selections (this is how they are called) in CKEditor‘s widgets. Unfortunately I don’t have a good news. Solution 1 First of all, there’s a mscontrolselect event. When I found it (and the fact that its name has an ms prefix) … Read more
UIWebView with contentEditable (html editing), first responder handling?
Here is how I overwrite these methods in a UIWebView subclass (content is the id of the editable element): -(BOOL)resignFirstResponder { [self setUserInteractionEnabled:NO];[self setUserInteractionEnabled:YES]; return [super resignFirstResponder]; } // only works on iOS 6+ -(void)becomeFirstResponder { self.keyboardDisplayRequiresUserAction = NO; // set here or during initialization // important note: in some situations (newer iOS versions), it … Read more
Saving and Restoring caret position for contentEditable div
back to 2016 🙂 After I came across solutions here and they did not suit me, because my DOM was replaced completely after each typing. I’ve done more research and come with a simple solution that saves the cursor by character’s position that works perfect for me. The idea is very simple. find the length … Read more
Get element node at caret position (in contentEditable)
Firstly, think about why you’re doing this. If you’re trying to stop users from editing certain elements, just set contenteditable to false on those elements. However, it is possible to do what you ask. The code below works in Safari 4 and will return the node the selection is anchored in (i.e. where the user … Read more
How to find cursor position in a contenteditable DIV?
If all you want to do is insert some content at the cursor, there’s no need to find its position explicitly. The following function will insert a DOM node (element or text node) at the cursor position in all the mainstream desktop browsers: function insertNodeAtCursor(node) { var range, html; if (window.getSelection && window.getSelection().getRangeAt) { range … Read more