Посмотрите, имеет ли фокус ContentEditable div - PullRequest
Новая
       1

Посмотрите, имеет ли фокус ContentEditable div

9 голосов
/ 30 марта 2012

Я пытаюсь проверить, есть ли у contenteditable div фокус, но у меня возникли некоторые проблемы.Вот мой код: 

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

Проблема в том, что он всегда возвращает «Имеет фокус», даже если это не так.Каков наилучший способ сделать это?

Обновление: Причина для этого заключается в том, чтобы увидеть, находится ли курсор в нужном месте до вставкиновый элемент.В противном случае, если последнее место, по которому пользователь щелкнул, было в заголовке, то, когда я восстанавливаю выделение с помощью Rangy и заменяю его новым элементом, оно попадает в заголовок.Мне нужен способ выяснить, сфокусирован ли делимый объект div / находится ли в нем курсор, поэтому если нет, я просто добавлю элемент, который вставляю в конце.

Обновление 2: Вот JSFiddle, иллюстрирующий мою проблему: http://jsfiddle.net/2NHrM/

Ответы [ 4 ]

12 голосов
/ 30 марта 2012

Попробуйте: 

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

Или: 

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

Проверьте contenteditable_focused перед выполнением сценария.

Или: 

if ($( document.activeElement ).is("#journal-content")) {
    alert("Has Focus");
} else {
    alert("Doesn't Have Focus");
}
5 голосов
/ 20 сентября 2015

Для чистого JavaScript, когда у вас есть несколько contenteditable элементов:

Чек document.activeElement.id или document.activeElement.isContentEditable.

Пример: 

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>
4 голосов
/ 14 августа 2013

Что насчет этого?: 

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

Я не знаю, насколько хорошо это поддерживает браузер, но по крайней мере Chrome и Firefox поддерживают его.

0 голосов
/ 30 марта 2012

Вы можете попробовать это 

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

Возможно, если вы расскажете нам, чего вы пытаетесь достичь, мы окажем вам большую помощь.Между тем, вы можете прочитать здесь: http://api.jquery.com/focus-selector/.

...