Как я могу получить элемент, в котором находится карет, с помощью Javascript при использовании contentEditable?

Скажем, у меня есть некоторые HTML-код, как это:Как я могу получить элемент, в котором находится карет, с помощью Javascript при использовании contentEditable?

<body contentEditable="true"> 
    <h1>Some heading text here</h1> 
    <p>Some text here</p> 
</body>

Теперь каретка (мигающий курсор) мигает внутри элемента H1, скажем, в слове «заголовок». Как я могу получить имя элемента, в котором находится карет, с JavaScript? Здесь я хотел бы получить «h1».

Это должно работать только в WebKit (оно встроено в приложение). Он должен предпочтительно также работать для выбора.

источник

2009-07-29 Lucas

Во-первых, подумайте о , почему вы это делаете. Если вы пытаетесь запретить пользователям редактировать некоторые элементы, просто установите contenteditable на false для этих элементов.

Однако, вы можете делать то, что вы просите. Нижеприведенный код работает в Safari 4 и возвращает узел, на который привязан выбор (т. Е. Когда пользователь начал выбирать, выбор «назад» вернет конец вместо начала) - если вы хотите, чтобы тип элемента как string, просто получите свойство nodeName возвращаемого узла. Это работает и для нулевой длины (т. Е. Только позиция каретки).

function getSelectionStart() { 
    var node = document.getSelection().anchorNode; 
    return (node.nodeType == 3 ? node.parentNode : node); 
}

источник

2009-07-31 11:13:35 You

Я не пытаюсь каким-либо образом заблокировать пользователя, мне просто нужно имя узла, чтобы я мог обновить часть пользовательского интерфейса. Спасибо за предоставление ответа, это отлично работает. – Lucas

'node.nodeType == 3' будет лучше проверять текстовый узел. –

Используя это в HTMLEditor JavaFX, это работает, красиво возвращая элемент, в котором курсор/текст курсора помещается в раздел contentEditable, спасибо! В качестве примечания стороны document.activeElement распознается, но всегда возвращает элемент body, который не очень полезен. –

Как я могу получить элемент, в котором находится карет, с помощью Javascript при использовании contentEditable?

ответ

Смежные вопросы