2

I have this snippet:

<div contenteditable="true"> father
      <a contenteditable="false" href="#"> myLink </a>
</div>

My problem is that if I place caret after 

</a>

and I try to backspace for remove myLink html tag, It doesn't work in firefox, but it works in chorme, opera, safari and explorer. Other hand if in firefox I select 

<a contenteditable="false" href="#"> myLink </a>

and then delete it with backspace it works!.

Possible workaround It is range selecting of the element 

<a contenteditable="false" href="#"> myLink </a>

programmatically when user digit backspace key.

How can I do this in jquery? If the caret cursor is after 

</a>

and user digit backspace I want select 

<a contenteditable="false" href="#"> myLink </a>

and remove that node.

paganotti
  • 5,591
  • 8
  • 37
  • 49

1 Answers1

1

Add a span tag with contenteditable=true like below,

<a contenteditable="false" href="#"><span contenteditable="true"> myLink </span></a>

Check jsFiddle here,

I tested it in FF, IE 8 and Chrome and was able to remove with backspace, but the user experiance is different in FF and other browsers.

I am not sure if this is the best way to do it.

Edit: Seems like this is already been answered here

Community
  • 1
  • 1
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134