Xem liệu div ContentEditable có tập trung

Question

Tôi đang cố gắng kiểm tra xem liệu div có thể chỉnh sửa có tập trung hay không, nhưng tôi đang gặp một số sự cố. Đây là mã của tôi cho đến thời điểm này:

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

Vấn đề là luôn luôn trả về "Đã tập trung" ngay cả khi không. Cách tốt nhất để làm gì?

Cập nhật: Lý do làm việc này là để xem con trỏ có ở vị trí mong muốn trước khi chèn phần tử mới hay không. Nếu không, nếu vị trí cuối cùng mà người dùng nhấp vào trong tiêu đề, thì khi tôi khôi phục lựa chọn bằng Rangy và thay thế bằng phần tử mới, nó sẽ kết thúc trong tiêu đề. Tôi cần một cách để tìm hiểu xem div có thể chỉnh sửa được tập trung/có con trỏ trong đó hay không, vì vậy nếu không, tôi sẽ chỉ cần thêm phần tử mà tôi chèn vào cuối.

Cập nhật 2: Dưới đây là một JSFiddle minh họa vấn đề của tôi: http://jsfiddle.net/2NHrM/

Answer 1

Hãy thử:

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

Hoặc:

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; 
}); 

Kiểm tra contenteditable_focused trước khi thực hiện kịch bản của bạn.

Hoặc:

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

Answer 2

Bạn có thể thử này

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

Có lẽ nếu bạn sẽ cho chúng tôi biết những gì bạn đang cố gắng để đạt được, chúng tôi sẽ có một sự giúp đỡ nhiều hơn nữa. Trong khi đó, bạn có thể đọc ở đây: http://api.jquery.com/focus-selector/.

Answer 3

gì về điều này ?:

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

Tôi không biết trình duyệt tốt như thế nào hỗ trợ cho điều này là nhưng ít nhất Chrome và Firefox hỗ trợ nó.

Answer 4

Đối tinh khiết JavaScript khi bạn có nhiều yếu tố contenteditable:

CSS và Markup là hoàn toàn cho đoạn

Hãy thử chạy đoạn mã và nhấn một trong hai yếu tố.

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>