Mam <div contenteditable=true> gdzie zdefiniować przez WYSIWYG niektóre elementy. Na przykład <p>, <h1> itd. Chciałbym bezpośrednio skupić się na jednym z tych elementów.Ustaw fokus na element div contenteditable
Na przykład na <p id="p_test">. Ale wygląda na to, że funkcja focus() nie działa na elementach <div>, elementach ...
Czy istnieje inny sposób określenia ostrości w moim przypadku?
Powiąż funkcję obsługi zdarzeń "kliknij" z wszystkimi elementami w obrębie elementu div z atrybutami i zmień klasę/styl po kliknięciu (tj. Dodaj klasę "skupioną" do elementu);
Użytkownik może określić, który element ma fokus, dodając styl, taki jak kolorowe obramowanie lub wewnętrzny cień ramki. Potem, gdy chcesz uzyskać dostęp do elementu skupione w skrypcie jQuery, po prostu zrobić coś takiego:
var focused = $('.focused');
Pyta o przesunięcie kija użytkownika do elementu, a nie tylko stylizację wybranych elementów. –
To nie pomoże. –
zauważyłem, że jQuery ostrości() nie działa dla mojego contenteditable div o szerokości i wysokości 0. Zastąpiłem go .get (0) .focus() - natywna metoda javascript focus - i to działa.
Którą przeglądarkę? Wygląda na to, że nie działa w Safari, ale Firefox i Chrome radzą sobie z nim dobrze. –
To jest NIESAMOWITE! Dziękuję, że wymyśliłeś to i podzieliłeś się! – Rogala
jakikolwiek pomysł, jak to może działać w wanilii js? –
W nowoczesnych przeglądarek można użyć:
var p = document.getElementById('contentEditableElementId'),
s = window.getSelection(),
r = document.createRange();
r.setStart(p, 0);
r.setEnd(p, 0);
s.removeAllRanges();
s.addRange(r);
Ale jeśli elementem jest pusty Mam jakieś dziwne problemy tak pustych elementów można to zrobić:
var p = document.getElementById('contentEditableElementId'),
s = window.getSelection(),
r = document.createRange();
p.innerHTML = '\u00a0';
r.selectNodeContents(p);
s.removeAllRanges();
s.addRange(r);
document.execCommand('delete', false, null);
Po usunięciu nbsp kursor pozostaje wewnątrz elementu p
PS tylko zwykła przestrzeń nie działa dla mnie
jaka jest zmienna p w twoich przykładach? –
@BT Zakładam, że jest to element P root, chociaż powinien to wyjaśnić, nie pozostawiając miejsca na wątpliwości. –
Spośród wielu proponowanych rozwiązań, jest to jedyna metoda, która sprawdziła się, pozwalając mi skupić się na contenteditable div w oknie dialogowym jquery. –
W przypadku kogoś, kto używa MediumEditor który zarządza contenteditable elementu, natyka się na tej kwestii, następujące pracował dla mnie:
editor.selectElement(editorDOMNode);
editor jest instancją z MediumEditor.editorDOMNode jest odniesieniem do rzeczywistego węzła DOM contenteditable.Możliwe jest również, aby skupić się na konkretnym węzła potomnego w edytorze następująco:
editor.selectElement(editorDOMNode.childNodes[0]);
Stary post ale żadne z rozwiązań pracował dla mnie. Zrozumiałem to ostatecznie:
var div = document.getElementById('contenteditablediv');
setTimeout(function() {
div.focus();
}, 0);
nie wiesz dlaczego, to działa całkowicie !!! zawijanie logiki .focus() w setTimeout zrobiło sztuczkę !! dzięki! – sga4
@ sga4 Cieszę się, że pomogło :) – chris97ong
Nice! Niektóre rzeczy muszą wrócić do harmonogramu, zanim będą mogły zostać właściwie zmanipulowane. Przeglądarki są dziwne. Dzięki! –
Możesz spróbować tego kodu, może automatycznie ustawić ostrość w ostatniej lokalizacji wstawki.
let p = document.getElementById('contenteditablediv')
let s = window.getSelection()
let r = document.createRange()
r.setStart(p, p.childElementCount)
r.setEnd(p, p.childElementCount)
s.removeAllRanges()
s.addRange(r)
Nie możesz ustawić pola div lub p, ponieważ nie ma dla niego żadnych akcji, na co chcesz się skoncentrować? –
czy ktoś wie, jak to jeszcze zrobić? –
@NickCraver pytanie wymienia jego zawartość do edycji, co oznacza, że można pisać i edytować itp.idealnie poprawne pytanie imo – Blowsie