contenteditable 요소 주위의 아무 곳이나 클릭하면 Chrome에서 선택됩니다.

크롬에서는 간단한 contenteditable="true" span을 사용하며 사용자가 주변을 클릭하면 커서가 나타나고 편집을 시작할 수 있습니다. 이것은 성가시다. b/c 사용자가 바깥 쪽이 아닌 범위 자체를 클릭 할 때만 커서가 나타나기를 원한다.contenteditable 요소 주위의 아무 곳이나 클릭하면 Chrome에서 선택됩니다.

예 : 아래 http://jsbin.com/oyamab/edit#javascript,html,live

html로 ... 당신은 크롬에서 링크를 방문하면

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

, 렌더링 된 HTML 상자 (jsbin에서 맨 오른쪽 열)의 아무 곳이나 클릭하고 당신이 할 수있는 편집을 시작하십시오. 반면에 Firefox에서는 실제 범위를 클릭하여 편집해야합니다 (예!).

크롬으로 받아들이거나 해킹이 필요합니까? 감사.

출처

2012-06-04 Ian Davis

강력하게 웹킷 일 뿐이라고 생각합니다. 당신은 여전히로 클릭하면,

document.getElementById("hello").onclick = function(evt) { 
    if (!this.isContentEditable) { 
     this.contentEditable = "true"; 
     this.focus(); 
    } 
};

출처

2012-06-05 23:44:28

불행히도 : http://jsfiddle.net/timdown/nV4gp/

HTML :

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

JS 당신은 비록이

데모를 클릭 유일의 스팬의 contentEditable을하여 해결할 수 있습니다 "hello world"의 맨 오른쪽, 그것은 onclick 이벤트를 유발하고 그것을 contenteditable하게 만듭니다. 여기 스크린 샷 : http://i.imgur.com/WcTuZ.png –

@IanDavis : 처음에는 아니 었습니다. 사용자가 다른 곳을 클릭 할 때 span을 편집 할 수 없도록 만들면 약간의 해킹이 있긴하지만 괜찮습니다. http://jsfiddle.net/timdown/nV4gp/2/ –

contenteditable 요소 주위의 아무 곳이나 클릭하면 Chrome에서 선택됩니다.

답변

관련 문제