☰

コンテンツ編集可能な HTML 要素内のテキストをプログラムで選択しますか? 質問する

tag-icon • tag-icon javascript selection contenteditable
コンテンツ編集可能な HTML 要素内のテキストをプログラムで選択しますか? 質問する

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

私の質問は、要素内でもこれを行う方法はあるのでしょうかcontenteditable?

elem.focus()要素にキャレットを配置するには を実行できることがわかりましたcontenteditableが、その後 を実行してもelem.select()機能しません ( も同様ですsetSelectionRange)。これについては Web 上で何も見つけられませんでしたが、間違ったものを探しているのかもしれません...

ちなみに、違いがあるとすれば、これは Chrome 拡張機能用なので、Google Chrome でのみ動作する必要があります。

ベストアンサー1

Chromeで要素のコンテンツをすべて選択したい場合（コンテンツ編集可能かどうかに関係なく）は、次の手順に従ってください。これはFirefox、Safari 3+、Opera 9+（以前のバージョンも可能）、IE 9でも機能します。文字レベルまで選択することもできます。必要なAPIはDOM Range（現在の仕様はDOM レベル 2、参照翻訳）と選択は、新しいレンジ仕様（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);

おすすめ記事