问题
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.
回答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();
}
};
来源：https://stackoverflow.com/questions/10886882/contenteditable-click-anywhere-around-element-and-its-selected-in-chrome