Firefox 커서가 보이지 않고 다른 것을 클릭했을 때 표시됩니다.

Question

필자는 필자가 만난 가장 이상한 버그가 있으며, 필자는이 사실에 대한 나의 지혜가 거의 끝났습니다. 이 디버깅 방법 (또는 영리한 해결 방법)에 대한 아이디어가있는 사람이라면 누구나 굉장 할 것입니다.

문제 : 나는의 contentEditable 사용하여 파이어 폭스에서 간단한 WYSIWYG 편집기를 만들고있어

. 아약스를 통해 편집 할 텍스트를로드 할 때 문제가 나타납니다. 로드하기 전에 커서가 잘 보이고 (1 초 동안) 텍스트가로드되면 사라집니다. 여전히 텍스트를 입력 할 수 있으며 커서는 여전히 "거기"입니다 (상태 상자는 현재 줄/열을 잘 보여줍니다). 그러나 커서는 보이지 않으며 선택 오버레이가 나타나지 않습니다.

다음은 정말 이상하게 만드는 이유입니다. 다른 모든 DOM 요소에서 다른 창에서도 아무 것도 클릭하지 않으면 다른 창에서도 커서가 돌아가고 정상적으로 작동합니다. 실제로, 커서에 문제가있는 유일한 시간은 맨 처음 페이지를로드 할 때 또는 새로 고침 할 때입니다. contentedtable div 안에 아무 곳이나 클릭해도 수정되지 않습니다. 새로 고치려면 바깥을 클릭해야합니다.

지금 당장은 해결 방법이 필요합니다. $ (someelement) .click 또는 $ (somelement) .focus의 500 가지 맛을 시도했지만 사용자의 실제 클릭을 완전히 복제하지는 않습니다.

누구나 전에 본 것과 같은 사람이 있습니까? 감사.

Answer 1

을, 그러나 나는 빠른 - 및 - 더러운 수정 트릭 않습니다 발견했다. 나는 앵커 태그를 DOM에 추가하고, 포커스 (jQuery .focus 사용)를 지정한 다음, 제거한다.

나는 여러 번 전에 .focus를 시도했지만, 항상 트릭을하지 않은 div 또는 li 요소에서 시도했다. 앵커 태그 여야합니다. 앵커 태그가 파이어 폭스의 내부 커서 표시 메커니즘에서 뭔가를 재설정하는 포커스에 가시적 인 구성 요소를 실제로 가지고 있기 때문에 그것이 의심 스럽습니다.

어느 쪽이든, 이와 같은 문제를 해결하려고 시도했지만 해결되지 않는 경우 MorganTiley의 설명을 참조하십시오. 이는 좋은 리드를 줄 수 있습니다.

Answer 2

내용을로드 할 때 html 노드의 구조가 변경되어 선택이 무효화되기 때문입니다 (커서는 접힌 선택 항목 임). Rangy을 통해 초기화하는 것이 좋습니다. 그것은 jquery와 함께 잘 작동합니다. jquery를 사용하여 contentEditable 영역의 첫 번째 요소를 가져옵니다. 새로운 단 범위를 만들고 해당 단락 (노드)을 선택하고 축소하여 시작합니다. 이렇게하면 커서가 콘텐츠의 맨 앞에 놓입니다. 여기 글쎄, 난 문제의 원인이되고 있는지 확인하지 않은 일부 거친 코드를

$(document).ready(function() { 
    //init rangy 
}); 

function ajaxLoaded { 
    var p = $(".contenteditablediv p:first")[0]; 
    var sel = rangy.getSelection(); 
    sel.collapse(p, 0); 
}