Contenteditable клик вокруг элемента вокруг и выбран в Chrome

В Chrome у меня есть простой contenteditable="true" span, и если пользователь щелкает по нему, курсор появляется, и он может начать редактирование. Это раздражает b/c. Мне нужно, чтобы курсор отображался, когда пользователь нажимает на сам диапазон, а не за его пределами.

Пример: http://jsbin.com/oyamab/edit#javascript,html,live

Html ниже...

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

Если вы заходите по этой ссылке в Chrome, щелкните в любом месте в окне рендеринга html (крайний правый столбец в jsbin), и вы можете начать редактирование. В Firefox, с другой стороны, вам нужно щелкнуть по фактическому диапазону, чтобы отредактировать его (yay!).

Нужно ли просто принимать это как вещь Chrome, или там есть взломать ее? Спасибо.

Ответы

Ответ 1

Я сильно подозреваю, что это просто вещь WebKit. Вы можете обойти это, сделав диапазон contenteditable только тогда, когда он нажал

Демо: 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();
    }
};