2012-09-03 67 views
31

在將其標記爲重複項之前,我希望您認識到,沒有人真正爲這個特定問題提供了很好的答案。在select all text in contenteditable div when it focus/click中,接受的答案和Tim Down的答案都沒有幫助,因爲它們只在元素已經聚焦時才起作用。在我的情況下,我希望點擊按鈕後可以選擇contenteditable div中的所有文本,即使div沒有事先被關注。如何選擇contenteditable div中的所有文本?

我該怎麼做?

回答

46

我使用了一些代碼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鏈接。

+0

什麼是瀏覽器兼容性? – crush

+0

小提琴在FF 28中工作,但不適用於帶有操作系統主題(CSS'外觀)的'contenteditable'輸入元素。您可能想要將'element.focus();'添加到' selectText()'函數,或者它將選擇沒有光標在該字段中的文本 – CoDEmanX

+0

只是一個建議,刪除行「console.log(this,element);」,因爲它不需要工作 –

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

通過鏈接中提供的答案來判斷,不能在按鈕內點擊代碼。

什麼即時消息說,在格連說onfocus="document.execCommand('selectAll',false,null)"

然後使用jQuery觸發焦點$('#test').focus();

9

例如,在接下來的情況下,如果用戶設定的對焦轉換成可編輯的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/

+0

jsfiddle鏈接請 – think123

+0

並且不存在a還沒有涉及'execCommand'的方式? – think123

+0

@ think123,請參閱最新答案中的鏈接。爲什麼不'document.execCommand'?另一種方式(我認爲)需要使用'selection'和'range'對象。 –

3

很棒的功能。

我已經適應它通過類來實現充分的選擇在任意數量的可編輯的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> 

FIDDLE :

http://jsfiddle.net/tw9jwjbv/

+0

很棒的功能,保存了我的生活,我添加了'$(「#mybutton」)。click(function(){(##mydiv)。selectText(); document.execCommand(「copy」);'將DIV的哪些內容複製到剪貼板。 – Matt

相關問題