Question

113

Prevent deletion of all < li> tags in a content editable < ul>

rated 0 times [ 120] [ 7] / answers: 1 / hits: 5209 / 10 Years ago, thu, june 12, 2014, 12:00:00

When you backspace all the way to the beginning of a <li> tag within a content editable <ul> tag, all of the remaining <li> tags are deleted.

<ul contenteditable=true>

    <li>Hello</li>

    <li>World</li>

</ul>

jsfiddle: http://jsfiddle.net/8Q53V/

Put your cursor after the 'd' in world and backspace all the way to the beginning of the line. When you hit backspace again, it will also delete the 'Hello' list item. How can you prevent this behavior?

UPDATE: It looks like this behavior only exists in Chrome

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminkyrap

Add To Favorites

Follow

Total Points: 631

Total Questions: 89

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

jazminkyrap questions

1 How to fix error: Fontconfig error: Cannot load default config file

Sat, Apr 17, 21, 00:00, 3 Years ago

1 How to return an attribute of clicked element in react?

Sun, Jul 5, 20, 00:00, 4 Years ago

1 why do I got Uncaught TypeError: response.text is not a function error when try to assignt body received as text to a variable in javascript

Sat, May 16, 20, 00:00, 4 Years ago

1 Error This line has a length of 182. Maximum allowed is 100 max-len

Thu, Apr 16, 20, 00:00, 4 Years ago

1 Selecting an html node's text content with htmlparser2 in Node.js

Mon, May 27, 19, 00:00, 5 Years ago

View All

answered 10 Years ago hailey · Accepted Answer

This is what I have found:

The erronous behavior of contenteditable lists in Opera and Chrome only occurs if the parent ul element is not followed by any other element with a minimum rendering space of 1px x 1px. The display value of the element doesn't matter, as long as it is non-empty or has a set height dimension with CSS.

So adding a simple <div style=height: 1px;> will answer your most direct question.

However, You can't reliably use contenteditable lists in HTML at the time of asking.

This question intrigued me and I tested it on Moz FF 29-30, Opera 21, Google Chrome 35 & IE 11, on Win 8.1 . I tested simple keys like Enter, Backspace and Delete.

TL;DR: IE 11 completely messes up, Opera & Chrome do pretty good if the ul is followed by an element with a rendered size, and Moz FF inserts a weird   tag. You would need e.preventDefault(), e.keyCode/charCode and the Selection & Range JS API to create a custom contenteditable list that works consistently across all browsers. However, these prerequisites already don't work consistently on all browsers. Best solution: use existing editors or some invisible text input for input.

These are the detailed gotcha's:

Hitting Enter to add a new li will add the following markup:

Opera and Google Chrome: <li> <li>

Moz FF: <li>

IE 11: if the active li is non-empty: <li> </li>, if it is empty, IE completely messes up & inserts a p, then duplicates an empty <ul contenteditable=> after it, with only a   tag inside. This empty ul will be added after the element following the original element, if any.

Hitting Backspace to remove a li:not(:first-child) will do the following:

Opera and Google Chrome: if the ul is not followed by an element with a rendered size, all li's will be deleted. If it is, the expected behavior occurs. (one li is removed).

Moz FF: The expected behavior occurs (one li is removed). However, Moz FF moves the cursor out of the contenteditable area after removing a li.

IE 11: Same behavior as when hitting Enter.

Hitting Backspace to remove the first li should be prevented at all costs.

For every browser tested, this breaks the list lay-out. All new Enter hits will generate div's as direct children of the list.

Hitting Delete to remove a subsequent li works consistently across all tested browsers. The subsequent li will be removed, and any content inside it will be transferred to the current li

Typing the first letter in an empty li will do the following:

Opera, IE11 and Google Chrome: The letter is printed. The automatically inserted   tag is removed.

Moz FF: The letter is printed. The custom   tag is not removed.

Removing the only letter in an empty li will do the following:

Opera, IE11 and Google Chrome: Another   tag is automatically inserted.

Moz FF: Nothing. The custom   is still present.

Fiddle: http://jsfiddle.net/8Q53V/8/ (first ul is with custom coded behavior, not perfect, second ul is standard)