Contenteditable div içindeki tüm metinler nasıl seçilir?

Question

Bu çift olarak işaretlenmeden önce, hiç kimsenin bu özel soru için gerçekten iyi bir yanıt sağlamadığını fark etmenizi istiyorum. select all text in contenteditable div when it focus/click'da, kabul edilen yanıt ve Tim Down'ın cevabı her ikisi de yararlı değildir, çünkü bunlar sadece öğe zaten odaklanmışken çalışır. Benim durumumda, div daha önce odaklanmış olmasa bile, bir düğmeye tıkladıktan sonra seçilecek div içindeki tüm metnin seçilmesini istiyorum.

Bunu nasıl yapabilirim?

Answer 1

benim cevap ile gelip this thread bazı kod kullanılır. Siz de istediğin gibi% 100 jQuery var. Eğer

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 bağlantı

:) Umarım beğenirsiniz.

Answer 2

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

Bağlantıda sağlanan bu cevabı değerlendirerek, düğmenizdeki tıklatmayla kodu kullanamazsınız.

bile onfocus="document.execCommand('selectAll',false,null)"

Ardından sonraki senaryoda Örneğin Odağı $('#test').focus();

Answer 3

tetiklemek için jQuery kullanmak div im ne deyiş söylemek ise fare, klavye ile düzenlenebilir div (içine veya tıklayarak kullanıcı seti odak düğmesine) sonra düzenlenebilir div içeriği seçilir.

<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 On

: http://jsfiddle.net/QKUZz/

Answer 4

Harika işlev.

doğrudan tıklandığında olsun, bir sınıfın yoluyla düzenlenebilir div herhangi bir sayıda genelinde metnin tam seçimini sağlamak için uyarlanmış, ya da sekmeli ettik:

$.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/