Closed Bug 571694 Opened 14 years ago Closed 13 years ago

ContentEditable - DELETE, BACKSPACE, ENTER don't work inside SPAN nested in list elements

Categories

(Core :: DOM: Editor, defect)

Product:
Core
Component:
DOM: Editor
Platform:
x86
Windows 2000
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 439808

People

(Reporter: sonofdelphi, Unassigned)

Details

Attachments

(2 files)

Test-case to reproduce bug report
305 bytes, text/html
Details
Test-case to show expected behavior
305 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 ( .NET CLR 3.5.30729)

When the contenteditable attribute is set to true for SPAN elements, which are inside <OL><LI>, deletion functionality doesn't work.




Reproducible: Always

Steps to Reproduce:
Open the following page. Will be added as an attachment.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Demo: ContentEditable</title>
</head>
<body>
	<ol>
		<li>
			<span>
				<span contenteditable="true">What's on your mind?</span>
				<span><br>Added at 03:28:29 on 2010-04-17</span>
			</span>
		</li>
	</ol>
</body>
</html>
Actual Results:  
Delete functionality doesn't work.

Expected Results:  
Delete functionality works for the modified HTML with the SPAN is changed to a DIV.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Demo: ContentEditable</title>
</head>
<body>
	<ol>
		<li>
			<div>
				<span contenteditable="true">What's on your mind?</span>
				<span><br>Added at 03:28:29 on 2010-04-17</span>
			</div>
		</li>
	</ol>
</body>
</html>

    
    

    
  


  

    
    

    
  
Duplicate of Bug 546662 ?
Component: General → Editor
Product: Firefox → Core
QA Contact: general → editor
Version: unspecified → Trunk
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → DUPLICATE

    
    

    
  
No, this behavior is only when the span is inside the OL LI structure.
If you remove the OL LI, then delete functionality works.

That is, the following will work
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Demo: ContentEditable</title>
</head>
<body>
			<span>
				<span contenteditable="true">What's on your mind?</span>
				<span><br>Added at 03:28:29 on 2010-04-17</span>
			</span>
</body>
</html>

    
    

    
  
does not seem to be a duplicate
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---

    
  
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Windows Vista → Windows 2000
Summary: ContentEditable - DELETE, BACKSPACE, ENTER don't work inside SPAN elements → ContentEditable - DELETE, BACKSPACE, ENTER don't work inside SPAN nested in list elements

    
    

    
  
I have ran into this problem as well. And did some more research. See the html document below for what works and doesn't work:

<html>
<head>
<title>kenny is dead</title>
<style>
	.works {
		display: inline;
		border: 1px solid green;
	}
	.broken {
		display: inline;
		border: 1px solid red;
	}
</style>
</head>

<body>
<h1>Backspace and delete are broken in the red bordered contentEditable fields</h1>
<h2>Selecting some text and pressing del or backspace works, just backspace/del
without a selection does not</h2>

<h2>ul > li > a > div.editable</h2>
<ul>
	<li>
		<a onclick="event.cancleBubble=true">
			<div contentEditable=true class='works'>test with some content</div>
		</a>
	</li>
</ul>

<h2>ul > li > a > span.editable</h2>
<ul>
	<li>
		<a onclick="event.cancleBubble=true">
			<span contentEditable=true class='broken'>test with some content</span>
		</a>
	</li>
</ul>

<h2>ul > li > a > span > span.editable</h2>
<ul>
	<li>
		<a onclick="event.cancleBubble=true"><span>
			<span contentEditable=true class='broken'>test with some content</span>
		</span></a>
	</li>
</ul>

<h2>ul > li > a > div > span.editable</h2>
<ul>
	<li>
		<a onclick="event.cancleBubble=true"><div>
			<span contentEditable=true class='works'>test with some content</span>
		</div></a>
	</li>
</ul>

<h2>li > a > span.editable</h2>
	<li>
		<a onclick="event.cancleBubble=true">
			<span contentEditable=true class='broken'>test with some content</span>
		</a>
	</li>

<h2>ul > li > span.editable</h2>
<ul>
	<li>
		<span contentEditable=true class='works'>test with some content</span>
	</li>
</ul>

<h2>a > span.editable</h2>
<a onclick="event.cancleBubble=true">
	<span contentEditable=true class='works'>test with some content</span>
</a>

</body>
</html>

    
  
Status: NEW → RESOLVED
Closed: 14 years ago → 13 years ago
Resolution: --- → DUPLICATE

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: