contenteditable点击元素周围的任何地方，并在Chrome中选择它 [英] contenteditable click anywhere around element and it's selected in Chrome
问题描述
在Chrome中，我有一个简单的 contenteditable =truespan ，如果用户点击它周围的任何地方，光标会显示，他/她可以开始编辑。这很烦人b / c我只希望当用户点击跨度本身而不是在其外部时显示光标。
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.
示例： http://jsbin.com/oyamab/edit#javascript,html,live
以下Html ...
Html below...
<body>
<span id="hello" contenteditable="true">Hello World</span>
</body>
如果您在Chrome中访问该链接，请点击呈现的html框中的任意位置（最右侧列） jsbin），你可以开始编辑了。另一方面，在Firefox中，你必须点击实际的跨度来编辑它（是的！）。
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!).
我是否需要接受这个作为Chrome的东西，或者周围有黑客攻击吗？谢谢。
Do I need to just accept this as a Chrome thing, or is there a hack around it? Thanks.
推荐答案
我强烈怀疑它只是一个WebKit的东西。你可以解决这个问题，只有在点击它时才能满足范围
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
演示： 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();
}
};
这篇关于contenteditable点击元素周围的任何地方，并在Chrome中选择它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
