web-dev-qa-db-ja.com

div contenteditable要素にフォーカスを設定します

_<div contenteditable=true>_があり、WYSIWYGでいくつかの要素を定義しています。たとえば_<p>_、_<h1>_など。この要素の1つに直接焦点を当てたいと思います。

たとえば、_<p id="p_test">_。しかし、focus()関数は_<div>_要素、_<p>_要素では機能しないようです...

私の場合、フォーカスを定義する別の方法はありますか？

jqueryfocuscontenteditable
61
sanceray3

古い投稿ですが、解決策はありませんでした。私は最終的にそれを理解しました：

var div = document.getElementById('contenteditablediv');
setTimeout(function() {
    div.focus();
}, 0);
42
chris97ong

最新のブラウザでは次を使用できます。

var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
r.setStart(p, 0);
r.setEnd(p, 0);
s.removeAllRanges();
s.addRange(r);

しかし、あなたの要素が空の場合、私はいくつかの奇妙な問題を抱えているので、空の要素についてはこれを行うことができます：

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

Nbspカーソルを削除すると、p要素内に留まる

追伸普通のスペースだけではうまくいきません

34
Dima Vidmich

JQuery focus（）は、幅と高さが0のコンテンツ編集可能なDIVでは機能しないことに気付きました。これを.get（0）.focus（）（ネイティブjavascriptフォーカスメソッド）に置き換えました。

28
Vlad

contenteditable要素を管理する MediumEditor を使用している人がこの問題に遭遇した場合、次のことがうまくいきました。

editor.selectElement(editorDOMNode);
  1. editorはMediumEditorのインスタンスです。
  2. editorDOMNodeは、実際のcontenteditable DOMノードへの参照です。

  3. 次のように、エディター内の特定の子ノードに注目することもできます。

    editor.selectElement(editorDOMNode.childNodes[0]);
4
Eye

このコードを試すことができ、最後の挿入位置にオートフォーカスできます。

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)
2
Surmon

多くの場合、要素で.focus()を呼び出せないのは、tabIndexが-1であるためです。これは、タブを押してナビゲートするときにタブキーがフォーカスできないことを意味します。

TabIndexを> = 0に変更すると、要素に集中できます。動的に行う必要がある場合は、イベントリスナーの要素にtabindex> = 0を追加するだけです。

1
horsantula