[解決済み] プログラムによってコンテンツ化可能なHTML要素のテキストを選択する？

質問

JavaScriptでは、プログラムによってテキストを input または textarea 要素で指定します。入力にフォーカスを当てるには ipt.focus() でフォーカスし、その内容を ipt.select() . で特定の範囲を選択することもできます。 ipt.setSelectionRange(from,to) .

私の質問は、これを contenteditable 要素でもできるのでしょうか？

ができることがわかりました。 elem.focus() の中にキャレットを入れるには contenteditable 要素に入れますが、その後に実行する elem.select() を実行してもうまくいきません (また setSelectionRange ). それについてウェブ上で何も見つけることができませんが、たぶん間違ったものを探しているのでしょう...。

ちなみに、もし違いがあるのなら、これはChromeの拡張機能のためなので、Google Chromeで動作する必要があるだけです。

どのように解決するのですか？

Chrome で要素のすべてのコンテンツ (contenteditable または not) を選択したい場合、その方法は以下のとおりです。これは、Firefox、Safari 3+、Opera 9+（おそらく以前のバージョンも）、および IE 9 でも動作します。また、文字レベルまで選択範囲を作成することもできます。必要なAPIは、DOM Range（現在の仕様では DOM レベル 2 で、以下も参照してください。 MDN の一部として指定されている) と Selection。 新しい Range 仕様 ( MDN ドキュメント ).

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);