ContentEditable div에 포커스가 있는지 확인하십시오.

contenteditable div에 포커스가 있는지 확인하려고하는데 문제가 있습니다. 여기에 지금까지 내 코드입니다 :ContentEditable div에 포커스가 있는지 확인하십시오.

if ($("#journal-content:focus")) { 
    alert("Has Focus"); 
} else { 
    alert("Doesn't Have Focus"); 
}

문제는, 항상 돌아 오는 것은 그렇지 않은 경우에도 "포커스가". 이 일을하는 가장 좋은 방법은 무엇입니까?

업데이트 :이 일을하는 이유는 커서가 새로운 요소를 삽입하기 전에 원하는 위치 에 있는지 여부를 확인하는 것입니다. 그렇지 않으면, 사용자가 클릭 한 마지막 위치가 헤더에있는 경우 Rangy로 선택을 복원하고이를 새 요소로 바꿀 때 헤더에서 끝납니다. contenteditable div에 포커스가 있는지 알아볼 방법이 필요합니다. 커서가 있으면 그 안에 커서가 있습니다. 그렇게하지 않으면 마지막에 삽입 할 요소를 추가합니다.

업데이트 2 :는 여기 JSFiddle 설명 내 문제입니다 : http://jsfiddle.net/2NHrM/

출처

2012-03-30 Adam

확인하거나 아래 내 갱신 : – iambriansreed

혹시 해결책을 찾았나요? – iambriansreed

필자는 아래의 @ iambriansreed의 답변을 사용하여 Fiddle을 업데이트했습니다. – Irwin

시도 :

if ($("#journal-content").is(":focus")) { 
    alert("Has Focus"); 
} else { 
    alert("Doesn't Have Focus"); 
}

또는 : 스크립트를 실행하기 전에 contenteditable_focused에 대한

window.contenteditable_focused = false; 

$("#journal-content").focus(function() { 
    //alert("Has Focus"); 
    contenteditable_focused = true; 
}); 
$("#journal-content").blur(function() { 
    //alert("Doesn't Have Focus");   
    contenteditable_focused = false; 
});

확인합니다.

또는 : 당신이 우리가 더 도움이 될 것이다 달성하기 위해 노력하고있는 것을 우리에게 말해주지 경우

if ($(document.activeElement).is("#journal-content")) { 
    alert("Has Focus"); 
} else { 
    alert("Doesn't Have Focus"); 
}

출처

2012-03-30 02:46:23 iambriansreed

흠, 그 반대, 항상 "포커스가 없습니다"반환 ... – Adam

그럼 초점이 없습니다. – iambriansreed

...하지만 그렇습니다. 바로 그 후 나는 랭기 (Rangy)를 사용하여 선택을 저장하는데, 이것은 잘 작동합니다. – Adam

당신은 어쩌면이

if ($("#journal-content").is(":focus")) { 
...

을 시도 할 수 있습니다. 한편, 여기에서 읽을 수 있습니다 : http://api.jquery.com/focus-selector/. 어떤이에 대한

출처

2012-03-30 02:54:02

알았어, 내가하려고하는 것에 대한 설명으로 내 원래 게시물을 업데이트했다. (나는 너를 시도했지만 효과가없는 것 같다.) – Adam

내가 게시 한 링크를 따라 가면 다음과 같이 표시됩니다 : _ 현재 포커스가있는 요소를 찾고 있으면 $ (document.activeElement)가 전체 DOM 트리를 검색하지 않고도 검색합니다. _ –

는이 있지만, 적어도 크롬과 파이어 폭스를 지원이기 내가 얼마나 잘 브라우저 지원을 모르는

if (document.activeElement.isContentEditable) { 
... 
}

? :. 순수 자바 스크립트를

출처

2013-08-14 15:03:14 Riesling

모든 contentEditable 요소로 작업하십시오. – diegoreymendez

여러의 contentEditable 요소가 있습니다

CSS의 및 마크 업이 조각

스 니펫을 실행하고 두 요소를 눌러보십시오 순전히이다. 밖으로

function isFocused() { 
 
    if (document.activeElement.id == "journal-content") { 
 
    alert("Focused!"); 
 
    } else { 
 
    alert("Not focused :("); 
 
    } 
 
}

#journal-content { 
 
    background-color: #eee; 
 
} 
 
#not-journal-content { 
 
    background-color: #ccc; 
 
}

<div id="journal-content" contenteditable="true" onclick="isFocused()">Journal Content</div> 
 
<div id="not-journal-content" contenteditable="true" onclick="isFocused()">Not Journal Content</div>

출처

2015-09-20 01:35:26

ContentEditable div에 포커스가 있는지 확인하십시오.

답변

관련 문제