자바 스크립트 : 나는 자바 스크립트 꽤 새로운 오전 여기 사람이 다음과 같이 나를 도울 수 있기를 바랍니다의 contentEditable 사업부

에서 커서의 위치를 얻을 수 보다 나은. 동적으로 생성되고 텍스트와 HTML 태그가 모두 포함 된 contenteditable div가 하나 뿐인 페이지가 있습니다. 페이지에서이 div에 커서 위치에 특정 텍스트를 삽입하는 버튼을 추가하고 싶습니다.자바 스크립트 : 나는 자바 스크립트 꽤 새로운 오전 여기 사람이 다음과 같이 나를 도울 수 있기를 바랍니다의 contentEditable 사업부

지금까지 내가 사업부에서 텍스트를 선택할 때 잘 한 일에 다음 코드를 가지고 있지만 난 그냥 아무것도 선택하지 않고 거기에 내 커서를 놓고 경우는 DIV 외부 내 텍스트를 삽입합니다.

나는 그것이 커서 위치에 항상 선택의 위치에서 현재 수행하는 같은 방법으로 내 텍스트를 추가 얻을 수 있습니까? (가 커서 만 위치에서 요구되는대로 난 선택을 교체 할 필요가 없습니다 또한, 이것은 단지 하나 개의 특정 사업부에 필요한 것입니다..)

내 코드 :

<html> 
<head> 
<script type="text/javascript"> 
    function test() 
    { 
     var input = "TEST"; 
     document.selection.createRange().pasteHTML(input); 
    } 
</script> 

</head> 
<body> 
    <div id="myDiv" contenteditable>This is a test text.</div><br /> 
    <button type="button" onclick="test()">Test</button> 
</body> 
</html>

이 문제에 대한 도움을 주셔서 감사합니다.

출처

2013-10-27 user2571510

이벤트가 IE에서 실행될 때까지 <button> 요소가 포커스를 도용하여 선택을 파괴합니다. <button>을 선택 취소하면 포커스를받을 수 없게됩니다. 이것은 unselectable attribute IE에서 사용하여 수행됩니다 :

<button type="button" unselectable="on" onclick="test()">Test</button>

데모 : http://jsbin.com/aqAYUwu/5

내보기 대신 mousedown 이벤트를 사용하고 기본 동작 방지하는 것입니다 덜 좋은 또 다른 대안 :

<button type="button" unselectable="on" 
    onmousedown="test(); return false">Test</button>

을

contenteditable 요소의 현재 커서 위치에 HTML을 삽입하는 브라우저 간 기능을 찾을 수 있습니다.

https://stackoverflow.com/a/6691294/96100

마지막주의 사항 : contenteditable은 부울 속성이 아니므로 엄밀히 말하면 값을 지정해야합니다 (예 : <div contenteditable="true">), <div contenteditable> 내가 그것을 시도했습니다. 이것에 대한

출처

2013-10-28 10:42:37

감사를 모든 브라우저에서 작업을 수행하지만. 비록 그것이 여전히 포커스를 잃어 버리고 내 div 위에 텍스트를 삽입하는 것처럼 보이지만 (전에 텍스트 부분을 선택했을 때 여전히 잘 작동합니다) 주석과 링크는 매우 유용합니다. 이 문제를 피하기 위해 특정 div에 삽입 할 수있는 방법이 있습니까? – user2571510

@ user2571510 : JSBin 링크가 제대로 작동하지 않습니까? IE 7에서는 괜찮습니다. –

고마워, 팀. 포커스를 얻는 버튼에 관해서는 당신이 맞습니다. 내 문제는 여기에 문제의 단추를 (프롬프트 상자) 같은 Bootbox 대화 상자 내에 있고 거기에 단추를 클래스 있지만 ID가 그래서 내가 선택기없는 특성을 추가하는 방법을 모릅니다. – user2571510

자바 스크립트 : 나는 자바 스크립트 꽤 새로운 오전 여기 사람이 다음과 같이 나를 도울 수 있기를 바랍니다의 contentEditable 사업부

답변

관련 문제