संतोषजनक div में सभी पाठ का चयन कैसे करें?

Question

इसे डुप्लिकेट के रूप में फ़्लैग करने से पहले, मैं चाहता हूं कि आपको यह एहसास हो कि किसी ने वास्तव में इस विशिष्ट प्रश्न के लिए एक अच्छा उत्तर नहीं दिया है। select all text in contenteditable div when it focus/click में, स्वीकृत उत्तर और टिम डाउन का उत्तर दोनों सहायक नहीं हैं, क्योंकि वे केवल तभी काम करते हैं जब तत्व पहले ही केंद्रित हो। मेरे मामले में, मैं चाहता हूं कि सामग्री के सभी पाठ को बटन के क्लिक के बाद चुना जाए, भले ही div पहले से केंद्रित नहीं था।

मैं यह कैसे कर सकता हूं?

Answer 1

मैं अपने जवाब के साथ आने के लिए 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 लिंक।

Answer 2

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

लिंक में दिए गए इस उत्तर के आधार पर, आप अपने बटन के भीतर क्लिक करने के लिए कोड का उपयोग नहीं कर सकते हैं।

क्या im कहावत भी div में कहना है onfocus="document.execCommand('selectAll',false,null)"

फिर अगली परिदृश्य में उदाहरण के लिए ध्यान केंद्रित $('#test').focus();

Answer 3

को गति प्रदान करने jQuery का उपयोग करता है, तो संपादन योग्य 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/

Answer 4

ग्रेट फ़ंक्शन।

मैं एक वर्ग के माध्यम से संपादन योग्य divs के किसी भी संख्या में किसी टेक्स्ट से भरा चयन सक्षम करने के लिए यह अनुकूल नहीं बनाया है, चाहे जिसके पास, या करने के लिए टैब किए गए:

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