1

在 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>

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.

4

1 回答 1

1

我强烈怀疑这只是 WebKit 的事情。您可以通过使跨度内容仅在单击时可编辑来解决它

演示：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();
    }
};
于 2012-06-05T23:44:28.070 回答