एकल माउस क्लिक के साथ सभी DIV टेक्स्ट का चयन करें

Question

जब उपयोगकर्ता DIV पर क्लिक करता है, तो DIV टैग की सामग्री को हाइलाइट / चयन कैसे करें ... विचार यह है कि सभी पाठ हाइलाइट किए गए / चयनित हैं, इसलिए उपयोगकर्ता को माउस और संभावित रूप से पाठ को मैन्युअल रूप से हाइलाइट करने की आवश्यकता नहीं है पाठ की एक छोटी सी याद आती है?

उदाहरण के लिए, मान लें कि हमें नीचे जैसा DIV मिला है:

<div id="selectable">http://example.com/page.htm</div>

... और जब उपयोगकर्ता उस URL में से किसी पर क्लिक करता है तो पूरा URL टेक्स्ट हाइलाइट हो जाता है, ताकि वे ब्राउज़र में चयनित पाठ को आसानी से खींच सकें, या संपूर्ण URL को राइट क्लिक से कॉपी कर सकें।

धन्यवाद!

Answer 1

function selectText(containerid) {
    if (document.selection) { // IE
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}

<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

अब आपको एक तर्क के रूप में आईडी को पास करना होगा, जो इस मामले में "चयन करने योग्य" है, लेकिन यह अधिक वैश्विक है, जिससे आप इसे बिना उपयोग किए कई बार उपयोग कर सकते हैं, जैसा कि चिबॉर्ग उल्लेख किया गया है, jQuery।

Comments

BTW, आप आसानी से एक jQuery क्लिक घटना हैंडलर के document.getElementById('selectable')साथ बदल सकते हैं this। तब आप कार्यक्षमता को कई तत्वों के लिए विनीत रूप से जोड़ सकते हैं, उदाहरण के लिए एक कंटेनर में कई div: jQuery('#selectcontainer div').click(selectText);

— chiborg

यह Chrome, FF, Safari (Mac) और Chrome और IE (Windows 9+, 8 परीक्षण नहीं) पर ठीक काम करता है। लेकिन यह आईपैड मिनी (iOS6) या iPhone 4 पर सफारी पर काम नहीं करता है, अन्य iOS या Android के बारे में निश्चित नहीं है।

— प्रोटोटाइप

इस लेख के अनुसार, if (window.getSelection) {ओपेरा को ओपेरा ( quirksmode.org/dom/range_intro.html ) के लिए पहले आना चाहिए

— प्रोटोटाइप

यह समाधान ie11 में काम नहीं करता है। कोई विचार क्यों?

— स्विस मिस्टर

Chrome संस्करण 36+ में यह एक त्रुटि लौटाएगा "असंतोषजनक चयन समर्थित नहीं है"। समाधान से window.getSelection().removeAllRanges();पहले जोड़ना हैwindow.getSelection().addRange(range);

— nHaskins

Answer 2

अद्यतन २०१ATE:

नोड की सामग्री कॉल का चयन करने के लिए:

window.getSelection().selectAllChildren(
    document.getElementById(id)
);

यह IE9 + (मानकों मोड में) सहित सभी आधुनिक ब्राउज़रों पर काम करता है।

चलने योग्य उदाहरण:

function select(id) {
  window.getSelection()
    .selectAllChildren(
      document.getElementById("target-div") 
    );
}

#outer-div  { padding: 1rem; background-color: #fff0f0; }
#target-div { padding: 1rem; background-color: #f0fff0; }
button      { margin: 1rem; }

<div id="outer-div">
  <div id="target-div">
    Some content for the 
    <br>Target DIV
  </div>
</div>

<button onclick="select(id);">Click to SELECT Contents of #target-div</button>

---

नीचे दिया गया मूल उत्तर अप्रचलित है क्योंकि window.getSelection().addRange(range); उसे हटा दिया गया है

मूल उत्तर:

उपरोक्त सभी उदाहरणों का उपयोग करें:

    var range = document.createRange();
    range.selectNode( ... );

लेकिन इसके साथ समस्या यह है कि यह स्वयं नोड का चयन करता है जिसमें DIV टैग आदि शामिल हैं।

ओपी प्रश्न के अनुसार नोड के पाठ का चयन करने के लिए आपको इसके बजाय कॉल करने की आवश्यकता है:

    range.selectNodeContents( ... )

तो पूरा स्निपेट होगा:

    function selectText( containerid ) {

        var node = document.getElementById( containerid );

        if ( document.selection ) {
            var range = document.body.createTextRange();
            range.moveToElementText( node  );
            range.select();
        } else if ( window.getSelection ) {
            var range = document.createRange();
            range.selectNodeContents( node );
            window.getSelection().removeAllRanges();
            window.getSelection().addRange( range );
        }
    }

Comments

जब तक आप thisतत्व के clickश्रोता के भीतर है, तब तक आप आईडी पर आधारित तत्व प्राप्त करने के बजाय इसका उपयोग कर सकते हैं ।

— Zach Saucier

Answer 3

शुद्ध CSS4 समाधान है:

.selectable{
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
    -khtml-user-select: all; /* Konqueror HTML */
    -moz-user-select: all; /* Firefox */
    -ms-user-select: all; /* Internet Explorer/Edge */
    user-select: all; /* Chrome and Opera */

}

user-selectएक सीएसएस मॉड्यूल स्तर 4 विनिर्देश है, जो वर्तमान में एक मसौदा और गैर-मानक सीएसएस संपत्ति है, लेकिन ब्राउज़र इसे अच्छी तरह से समर्थन करते हैं - # खोज = उपयोगकर्ता-चयन देखें ।

पर और अधिक पढ़ें उपयोगकर्ता के चयन MDN पर यहाँ और इसके साथ खेलने w3scools में यहां

Comments

+1 भयानक भयानक सुरुचिपूर्ण समाधान! 2017 सितंबर परीक्षण किया गया और यह फ़ायरफ़ॉक्स और क्रोम बटन पर माइक्रोएसएफटी एज में दोषपूर्ण तरीके से काम करता है !? किसी भी विचार क्यों और कैसे तय करने के लिए? धन्यवाद!

— सैम

Answer 4

न्यूरोक्सिक का उत्तर वास्तव में मददगार था। मुझे केवल Chrome से कोई समस्या थी, क्योंकि जब मैंने बाहरी div पर क्लिक किया, तो यह काम नहीं किया। नई सीमा जोड़ने से पहले मैं इसे पुरानी सीमाओं को हटाकर हल कर सकता था:

function selectText(containerid) {
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select();
    } else if (window.getSelection()) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
    }
}
<div id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>

Answer 5

सामग्री संपादन योग्य सामग्री के लिए (नियमित इनपुट नहीं, आपको सिलेक्ट नॉनकोडेंट्स (केवल सिलेक्टनोड के बजाय) का उपयोग करने की आवश्यकता है।

नोट: सभी दस्तावेज़ "document.selection" और "createTextRange ()" IE 8 और उससे कम के लिए हैं ... यदि आप इस तरह से मुश्किल सामान करने का प्रयास कर रहे हैं तो आपको उस राक्षस का समर्थन करने की आवश्यकता नहीं होगी।

function selectElemText(elem) {

    //Create a range (a range is a like the selection but invisible)
    var range = document.createRange();

    // Select the entire contents of the element
    range.selectNodeContents(elem);

    // Don't select, just positioning caret:
    // In front 
    // range.collapse();
    // Behind:
    // range.collapse(false);

    // Get the selection object
    var selection = window.getSelection();

    // Remove any current selections
    selection.removeAllRanges();

    // Make the range you have just created the visible selection
    selection.addRange(range);

}

Answer 6

पाठ क्षेत्र फ़ील्ड का उपयोग करके, आप इसका उपयोग कर सकते हैं: (वाया Google)

<form name="select_all">

    <textarea name="text_area" rows="10" cols="80" 
    onClick="javascript:this.form.text_area.focus();this.form.text_area.select();">

    Text Goes Here 

    </textarea>
</form>

यह है कि मैं ज्यादातर वेबसाइटों को यह कैसे देखता हूं। वे इसे सीएसएस के साथ ही स्टाइल करते हैं ताकि यह एक टेक्सैरिया की तरह न दिखे।

Comments

सिर्फ क्यों नहीं this.focus();this.select();?

— ताहा पाकू

Answer 7

यह स्निपेट आपको आवश्यक कार्यक्षमता प्रदान करता है । आपको जो कुछ करने की जरूरत है, वह उस div में एक ईवेंट जोड़ देगा, जो इसमें fnSelect को सक्रिय करता है। एक त्वरित हैक जो आपको पूरी तरह से नहीं करना चाहिए और संभवतः काम नहीं कर सकता है, इस तरह दिखेगा:

document.getElementById("selectable").onclick(function(){
    fnSelect("selectable");
});

स्पष्ट रूप से यह मानते हुए कि स्निपेट से जुड़े को शामिल किया गया था।

Answer 8

मैंने इस फ़ंक्शन को jQuery प्लगइन के रूप में लपेटना उपयोगी पाया:

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

तो, यह एक पुन: प्रयोज्य समाधान बन जाता है। तो आप यह कर सकते हैं:

<div onclick="$(this).selectText()">http://example.com/page.htm</div>

और यह div में परीक्षण का चयन करेगा।

Comments

कॉल करने के लिए याद रखें window.getSelection ()। RemoveAllRanges (); जोसिलो के कोड में। इसके अलावा: मैं पहले विकल्प के रूप में window.getSelect डालने की वकालत करूंगा, क्योंकि यह HTML5 मानक है और document.selection IE8 और पुराने के लिए पुराना IE फॉलबैक है।

— Jan Aagard

Answer 9

इस सरल समाधान के बारे में कैसे? :)

<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">

निश्चित रूप से यह दिवा-निर्माण नहीं है, जैसा आपने उल्लेख किया है, लेकिन फिर भी यह मेरे लिए काम कर रहा है।

Comments

संक्षिप्त समाधान, लेकिन यह एक इनपुट या टेक्स्टारिआ फ़ील्ड के अलावा किसी तत्व में पाठ के लिए जिम्मेदार नहीं है।

— जोपीसी

Answer 10

निको ले: इस सरल समाधान के बारे में कैसे? :)

`<input style="background-color:white; border:1px white solid;" onclick="this.select();" id="selectable" value="http://example.com/page.htm">`

.....

पहले कोड:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly">

के बाद कोड:

<textarea rows="20" class="codearea" style="padding:5px;" readonly="readonly" onclick="this.select();" id="selectable">

बस इस भाग पर क्लिक करें = "this.select ();" आईडी = मेरे कोड में "चयन" ने ठीक काम किया। एक माउस क्लिक के साथ मेरे कोड बॉक्स में सभी का चयन करता है।

मदद निको ले के लिए धन्यवाद!

Answer 11

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}

Chrome में ऊपर का जवाब काम नहीं कर रहा है क्योंकि addRange पिछली अतिरिक्त सीमा को हटा देता है। मैं css के साथ नकली चयन के साथ इसके लिए कोई समाधान नहीं खोज पाया।

Comments

किसी के लिए यह कोड मददगार हो सकता है क्योंकि मैंने Chrome के नवीनतम संस्करण में काम किया है और पाया है: $ .fn.selectText = function () {रिटर्न $ (यह) .each (फ़ंक्शन (इंडेक्स, एल) {if (दस्तावेज़)। चयन) {var range = document.body.createTextRange (); range.moveToElementTange (el); range.select ();} if if (window.getSelection) {var range = document.reateRange (); range.selectNode (el) ); window.getSelection ()। removeAllRanges (); window.getSelection ()। AddRange (रेंज);}}); }

— हैदर अब्बास

Answer 12

आसानी से सभी के लिए सेट सीएसएस संपत्ति उपयोगकर्ता-चयन के साथ हासिल की। ऐशे ही:

div.anyClass {
  user-select: all;
}