Home:ALL Converter>In a contenteditable element, move the cursor between HTML tags

In a contenteditable element, move the cursor between HTML tags

Ask Time:2012-09-22T16:49:30         Author:Jordan

Json Formatter


Firefox handles this better than Chrome does, but neither exactly the way I want. They both lump all adjacent HTML tags together and treat them as one (which I don't want).

Firefox: when the cursor is left of a tag (or group of adjacent tags) and you press right, the cursor jumps past the first character preceding the tag. Then, if you press left, it goes between the character and the tag. (Same for pressing left then right.)

Chrome: the tag and the first character following it are lumped together. It is impossible to place the cursor between a tag and the following character.

Desired: a tag is treated as a single character with respect to the cursor. If the cursor is to the left of a tag and you press right, it should go to the right of the tag, and vice versa for pressing left.

How can the desired behavior be enforced on the browser?

This is not intended for a WYSIWIG editor. To serve a specific purpose, tags are represented visually in production just as they are in the jsfiddle. Users desire arbitrary control over which element contains the cursor.

b:before, b:after,
i:before, i:after,
p:before, p:after {
    color: blue;

b:before {
    content: '<b>';

b:after {
    content: '</b>';

p:before {
    content: '<p>';

p:after {
    content: '</p>';

i:before {
    content: '<i>';

i:after {
    content: '</i>';


<p contenteditable='true'>regular regular<b>bold</b>regular - 
try moving the cursor to either side of either blue tag.</p>
<p contenteditable='true'>try it in this: regular<b><i>bolditalic</i></b></p>

Author:Jordan,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/12542302/in-a-contenteditable-element-move-the-cursor-between-html-tags