contenteditable щелкните где-нибудь вокруг элемента, и это выбрано в Chrome

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

Пример: http://jsbin.com/oyamab/edit

HTML ниже...

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

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

Должен ли я просто принять это как вещь 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();
    }
};
Другие вопросы по тегам