1

In Chrome I have a simple contenteditable="true" span, and if the user clicks anywhere around it, the cursor shows up and he/she can start editing. This is annoying b/c I only want the cursor to show up when the user clicks on the span itself, not outside of it.

Example: http://jsbin.com/oyamab/edit#javascript,html,live

Html below...

<body>
  <span id="hello" contenteditable="true">Hello World</span>
</body>

If you visit that link in Chrome, click anywhere in the rendered html box (the far right column in jsbin), and you can start editing. In Firefox on the other hand, you have to click on the actual span to edit it (yay!).

Do I need to just accept this as a Chrome thing, or is there a hack around it? Thanks.

Ian Davis
  • 19,091
  • 30
  • 85
  • 133

1 Answers1

1

I strongly suspect it's just a WebKit thing. You can work around it though by making the span contenteditable only when it's clicked

Demo: http://jsfiddle.net/timdown/nV4gp/

HTML:

<body>
  <span id="hello">Hello World</span>
</body>

JS:

document.getElementById("hello").onclick = function(evt) {
    if (!this.isContentEditable) {
        this.contentEditable = "true";
        this.focus();
    }
};
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • unfortunately, if you still click to the far right of "hello world", it triggers the onclick event and makes it a contenteditable. screenshot here: http://i.imgur.com/WcTuZ.png – Ian Davis Jun 11 '12 at 20:05
  • @IanDavis: Not initially. If you ensure that the span is made non-editable when the user clicks elsewhere, it's fine, although a little hacky: http://jsfiddle.net/timdown/nV4gp/2/ – Tim Down Jun 12 '12 at 00:14