web-dev-qa-db-ja.com

contenteditable divのすべてのテキストを選択するにはどうすればよいですか？

これが重複としてフラグ付けされる前に、この特定の質問に対して実際に誰も良い答えを提供していないことを認識してほしい。 フォーカス/クリック時にcontenteditable divのすべてのテキストを選択 では、受け入れられた回答とTim Downの回答はどちらも役に立たず、要素が既にフォーカスされている場合にのみ機能します。私の場合、divが事前にフォーカスされていなかった場合でも、ボタンをクリックすると、contenteditable div内のすべてのテキストが選択されるようにします。

どうすればこれができますか？

javascriptjqueryhtmlcontenteditable
34
Lucas - Better Coding Academy

this thread のコードを使用して、答えを見つけました。あなたが求めたように、それは100％jQueryです。あなたがそれを好き願っています:)

jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   console.log(this, element);
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   } else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

$("button").click(function() {
    $("#editable").selectText();
});​

jsfiddle リンク。

52
Tom Oakley

たとえば、次のシナリオでは、ユーザーが編集可能なdivにフォーカスを設定した場合（マウス、キーボード、またはボタンをクリックして）、編集可能なdivのコンテンツが選択されます。

<div id="editable" style=" border:solid 1px #D31444" contenteditable="true" 
    onfocus="document.execCommand('selectAll', false, null);">
  12 some text...
</div>
    
<button onclick="document.getElementById('editable').focus();" >Click me</button>

JSFiddleの場合： http://jsfiddle.net/QKUZz/

12
Andrew D.

素晴らしい機能。

クラスを介して任意の数の編集可能なdivでテキストを完全に選択できるように、直接クリックするか、タブで移動するかを調整しました。

$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    //console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(".editable").on("focus", function () {
    $(this).selectText();
});
$(".editable").on("click", function () {
    $(this).selectText();
});
$('.editable').mouseup(function(e){
    e.stopPropagation();
    e.preventDefault();
    // maximize browser compatability
    e.returnValue = false;
    e.cancelBubble = true;
    return false; 
});

HTML：

<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">01 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">02 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">03 text...</div>

ファイドル：

http://jsfiddle.net/tw9jwjbv/

3
Eric P
_<div id="test" style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>
_

リンクで提供されているこの回答から判断すると、ボタン内のクリックでコードを使用することはできません。

私が言っていることは、div onfocus="document.execCommand('selectAll',false,null)"

次に、jQueryを使用してフォーカスをトリガーします$('#test').focus();

2
LmC

Chromeはすべてを選択するため、RAFを追加して回避しました。

requestAnimationFrame(() => document.execCommand('selectAll'));

パッチなしバージョン： http://jsfiddle.net/QKUZz/

パッチ適用済みバージョン： http://jsfiddle.net/0aqptw8m/

1
redaxmedia