Currently, I am coding a HTML document that includes an element with the attribute contenteditable set to true, but this element is wrapped inside a parent element with contenteditable set to false.
The HTML structure looks like this:
<div contenteditable=false>
<div contenteditable=true>
<p>Abc</p>
<p>Def</p>
</div>
</div>
If you want to see it in action, here is the JSFiddle Link: http://jsfiddle.net/mpsingh2003/gxbqujdw/1/
To replicate the issue, follow these steps: Open the link in Chrome
- Click after the "@" symbol in the line containing the text 'Def'
- Now click after the "@" symbol in the line containing the text 'Abc'. The cursor does not appear.
- If you click to the left of the "@" symbol in the text 'Abc', the cursor will appear. Then, clicking to the right of the "@" symbol will move the cursor to the desired position on the left of the "@" symbol.
In Firefox and Edge browsers, this functionality works as expected, with the cursor always appearing on the left when clicking to the right of the "@" symbol in any line. If anyone has any suggestions for an HTML or CSS solution, or if Javascript or jQuery needs to be used, please feel free to share.