在將其標記爲重複項之前,我希望您認識到,沒有人真正爲這個特定問題提供了很好的答案。在select all text in contenteditable div when it focus/click中,接受的答案和Tim Down的答案都沒有幫助,因爲它們只在元素已經聚焦時才起作用。在我的情況下,我希望點擊按鈕後可以選擇contenteditable div中的所有文本,即使div沒有事先被關注。如何選擇contenteditable div中的所有文本?
我該怎麼做?
在將其標記爲重複項之前,我希望您認識到,沒有人真正爲這個特定問題提供了很好的答案。在select all text in contenteditable div when it focus/click中,接受的答案和Tim Down的答案都沒有幫助,因爲它們只在元素已經聚焦時才起作用。在我的情況下,我希望點擊按鈕後可以選擇contenteditable div中的所有文本,即使div沒有事先被關注。如何選擇contenteditable div中的所有文本?
我該怎麼做?
我使用了一些代碼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鏈接。
<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();
例如,在接下來的情況下,如果用戶設定的對焦轉換成可編輯的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/
很棒的功能。
我已經適應它通過類來實現充分的選擇在任意數量的可編輯的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 :
很棒的功能,保存了我的生活,我添加了'$(「#mybutton」)。click(function(){(##mydiv)。selectText(); document.execCommand(「copy」);'將DIV的哪些內容複製到剪貼板。 – Matt
什麼是瀏覽器兼容性? – crush
小提琴在FF 28中工作,但不適用於帶有操作系統主題(CSS'外觀)的'contenteditable'輸入元素。您可能想要將'element.focus();'添加到' selectText()'函數,或者它將選擇沒有光標在該字段中的文本 – CoDEmanX
只是一個建議,刪除行「console.log(this,element);」,因爲它不需要工作 –