입력 대신 contenteditable과 함께 div를 사용하기로 결정했습니다. 여기에 코드가 있습니다. 간단합니다. <div contenteditable="true"></div> 그래서 jsfiddle을보세요 : http://jsfiddle.net/QkfKk/contenteditable divs는 Opera에서 초점이 맞지 않는 이상한 행동을합니다.
jsfiddle 용으로 첫 번째 줄을 표시했습니다. Opera에서 div에 초점을 맞추려면 표시된 영역을 직접 클릭해야합니다. 또한,저기서 어떤 공간에서도 더블 클릭하여 집중할 수 있습니다. 하지만 클릭이 두 배가되어서는 안됩니다. 나는 그것을 올바르게 설명하기를 바랍니다. Chrome 및 다른 브라우저에서는 div의 어느 위치로든 클릭 한 번으로 초점을 맞출 수 있습니다. 표시된 지역 또는 표시가없는 지역에서. 그것이 올바른 행동입니다.
해결했습니다. 이 솔루션에는 결함이 있지만 그만큼 충분합니다. 어쨌든 마크가없는 영역 포커스 이벤트 트리거를 클릭하면 그래서 커서 위치를 트리거 초점 이벤트의 마지막 가능한 위치로 설정하기로 결정했습니다. 코드는 다음과 같습니다.
var range = document.createRange();
var selection = getSelection();
var children = this.childNodes;
var last = children[children.length-1];
if (last.textContent.length) {
range.setStart(last,last.textContent.length);
} else {
range.setStart(this,0);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
그리고 이것은 focus에 바인딩됩니다. 솔루션은 실제로 쉽지만 잘 작동합니다.
바이올린 : http://jsfiddle.net/QkfKk/7/
+1 잘 알려진 바이올린. 하지만 가장 쉬운 해결책은 Opera에서 테스트하지 않는 것입니다. 그것은 겨우 1-2 %의 시장 점유율을 가지고 있으며, 사용자들은 대부분 부서진 페이지 * shrug * ''을 얻고 싶어하는 인기있는 업체입니다. 사실, Opera가 Blink로 전환하고 있기 때문에 다음 달에는 모든 종류의 이상한 버그를 기대합니다. –
두 번 클릭이 작동하는 이유는 두 번 클릭이 모두 선택을 의미하기 때문입니다. 일부 단어를 입력하고 div의 나머지 공간을 두 번 클릭하여 시도해보십시오. 나는 이것이 브라우저 구현 문제이며 우리가 그것에 관해 할 수있는 일이 거의 없다고 말할 것이다. – Antony
@Antony, 예, 고맙습니다. 그건 그렇고 그 선택은«, \ * (»비슷한 기호를 그리워합니다. 재미 있지만 도움이되지 않습니다.) – Novelist