Jak mogę uzyskać element, który jest obsługiwany przez JavaScript przy korzystaniu z contentEditable?

Powiedzmy mam jakiś kod HTML tak:Jak mogę uzyskać element, który jest obsługiwany przez JavaScript przy korzystaniu z contentEditable?

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

Teraz daszek (migający kursor) miga wewnątrz elementu H1, powiedzmy, że w słowie „nagłówek”. W jaki sposób mogę uzyskać nazwę elementu, który obsługuje JavaScript? Tutaj chciałbym uzyskać "h1".

To musi działać tylko w pakiecie WebKit (jest osadzone w aplikacji). Powinien również najlepiej pracować przy selekcji.

Źródło

2009-07-29 Lucas

Po pierwsze, pomyśl o , dlaczego robisz to:. Jeśli próbujesz powstrzymać użytkowników przed edycją niektórych elementów, ustaw dla tych elementów wartość false na contenteditable.

Możliwe jest jednak wykonanie tego, o co poprosisz. Poniższy kod działa w Safari 4 i zwróci węzeł, do którego zakotwiczony jest wybór (tj. Gdy użytkownik zaczął wybierać, wybranie "wstecz" spowoduje zwrócenie końca zamiast początku) - jeśli chcesz, aby typ elementu był ciąg, po prostu uzyskaj właściwość zwracanego węzła. Działa to również dla selekcji o zerowej długości (to znaczy po prostu pozycji z daszkiem).

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

Źródło

2009-07-31 11:13:35 You

Nie próbuję w żaden sposób blokować użytkownika, tak naprawdę potrzebuję nazwy węzła, aby zaktualizować część interfejsu. Dziękuję za udzielenie odpowiedzi, działa to świetnie. – Lucas

'node.nodeType == 3' byłoby lepszym sprawdzeniem dla węzła tekstowego. –

Korzystanie z tego w JavaMX HTMLEditor działa ładnie zwracając element, w którym kursor/tekst są umieszczone w sekcji contentEditable, dzięki! Nawiasem mówiąc, document.activeElement jest rozpoznawany, ale zawsze zwraca element body, który nie jest zbyt pomocny. –

Jak mogę uzyskać element, który jest obsługiwany przez JavaScript przy korzystaniu z contentEditable?

Odpowiedz

Powiązane problemy