একক মাউস ক্লিক সহ সমস্ত ডিআইভি পাঠ্য নির্বাচন করুন

Question

ব্যবহারকারী যখন ডিআইভিতে ক্লিক করেন তখন কীভাবে একটি ডিআইভি ট্যাগের বিষয়বস্তু হাইলাইট / নির্বাচন করা যায় ... ধারণাটি হ'ল সমস্ত লেখাটি হাইলাইট / সিলেক্ট করা হয় যাতে ব্যবহারকারীর মাউসের সাহায্যে ম্যানুয়ালি এবং সম্ভাব্যভাবে টেক্সট হাইলাইট করার প্রয়োজন হয় না কিছুটা মিস করবেন?

উদাহরণস্বরূপ, বলুন যে আমরা নীচের মতো একটি ডিআইভি পেয়েছি:

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

... এবং যখন ব্যবহারকারী সেই 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। তারপরে আপনি বেশ কয়েকটি উপাদানগুলিতে অবিচ্ছিন্নভাবে কার্যকারিতা যুক্ত করতে পারেন, উদাহরণস্বরূপ একটি jQuery('#selectcontainer div').click(selectText);

— ধারকটিতে

এটি ক্রোম, এফএফ, সাফারি (ম্যাক) এবং ক্রোম এবং আইই (উইন্ডোজ 9+, 8 পরীক্ষিত নয়) এ সূক্ষ্মভাবে কাজ করে। তবে অন্য আইওএস বা অ্যান্ড্রয়েড সম্পর্কে নিশ্চিত নয়, এটি আইপ্যাড মিনি (আইওএস 6) বা আইফোন 4-তে সাফারিটিতে কাজ করবে বলে মনে হচ্ছে না।

— প্রোটোটাইপ

এই নিবন্ধটি অনুসারে, ক্যোয়ারীটি if (window.getSelection) {প্রথমে অপেরা ( quirksmode.org/dom/range_intro.html ) এর জন্য আসা উচিত

— প্রোটোটাইপ

এই সমাধান ie11 এ কাজ করে না বলে মনে হচ্ছে। কোন ধারণা কেন?

— সুইস মিস্টার

ক্রোম সংস্করণ 36+ এ এটি "তাত্পর্যপূর্ণ নির্বাচন সমর্থন করে না" ত্রুটি ফিরিয়ে দেবে। সমাধানটি এর window.getSelection().removeAllRanges();আগে যুক্ত করতে হবেwindow.getSelection().addRange(range);

— n হ্যাসকিন্স

Answer 2

আপডেট আপডেট 2017:

নোডের সামগ্রীগুলি নির্বাচন করতে কল করুন:

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( ... );

তবে এর সাথে সমস্যা হ'ল এটি নোড নিজেই ডিআইভি ট্যাগ ইত্যাদির সাথে নির্বাচন করে

ওপি প্রশ্ন অনুসারে নোডের পাঠ্যটি নির্বাচন করতে আপনাকে তার পরিবর্তে কল করতে হবে:

    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 Sauceer

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

নিউরোক্সিকের উত্তরটি সত্যিই সহায়ক ছিল। ক্রোম নিয়ে আমার কেবল সমস্যা ছিল, কারণ যখন আমি একটি বাহ্যিক ডিভ ক্লিক করি তখন এটি কার্যকর হয় না। নতুন ব্যাপ্তি যুক্ত করার আগে আমি পুরানো রেঞ্জগুলি সরিয়ে এটি সমাধান করতে পারতাম:

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

বিষয়বস্তু সম্পাদনাযোগ্য স্টাফের জন্য (নিয়মিত ইনপুট নয়) আপনাকে সিলেক্ট নোড কনটেন্টস ব্যবহার করতে হবে (কেবলমাত্র সিলেক্ট নোডের চেয়ে)।

দ্রষ্টব্য: "ডকুমেন্ট.লেকশন" এবং "ক্রিয়েটেক্সট্র্যাঞ্জ ()" এর সমস্ত উল্লেখগুলি আইই 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

একটি পাঠ্য ক্ষেত্রের ক্ষেত্র ব্যবহার করে আপনি এটি ব্যবহার করতে পারেন: (গুগলের মাধ্যমে)

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

বেশিরভাগ ওয়েবসাইট এটি করে দেখি। তারা কেবল এটি CSS এর সাথে স্টাইল করে যাতে এটি কোনও পাঠ্যের মতো লাগে না।

Comments

শুধু না কেন this.focus();this.select();?

— তাহা পাকসু

Answer 7

এই স্নিপেট আপনার প্রয়োজনীয় কার্যকারিতা সরবরাহ করে । আপনাকে যা করতে হবে তা হল ডিভের সাথে একটি ইভেন্ট যুক্ত করা যা এটিতে 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>

এবং এটি ডিভ মধ্যে পরীক্ষা নির্বাচন করবে।

Comments

উইন্ডো.জেটস্লেশন () কল করতে ভুলবেন না remove জোসিলোর কোড হিসাবে এছাড়াও: আমি উইন্ডো.সেটলেখাকে প্রথম বিকল্প হিসাবে নির্বাচিত করার পক্ষে পরামর্শ দেব কারণ এটি এইচটিএমএল 5 স্ট্যান্ডার্ড এবং ডকুমেন্ট.ইলেকশনটি আইই 8 এবং এর আগের পুরানো আই ফলব্যাক।

— জান আগারার্ড

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);
        }
    });
}

উপরে উত্তর ক্রোমে কাজ করছে না কারণ অ্যাডরেঞ্জ পূর্ববর্তী যুক্ত ব্যাপ্তিটি সরিয়ে দেয়। CSS এর সাথে জাল নির্বাচনের পাশে এর কোনও সমাধান আমি পাইনি।

Comments

কারও কারও জন্য এই কোডটি Chrome এর সর্বশেষ সংস্করণে পরীক্ষিত ও এটি হিসাবে কাজ করে দেখেছি সহায়ক হতে পারে: f .fn.selectText = ফাংশন () {রিটার্ন $ (এটি) .এচ (ফাংশন (সূচক, এল) {যদি (দস্তাবেজ)। নির্বাচন) range var পরিসীমা = ডকুমেন্ট.body.createTextRange (); range.moveToElementText (এল); রেঞ্জ.সलेक्ट ();} অন্যথায় যদি (উইন্ডো.সেটলেশন) {var পরিসর = ডকুমেন্ট.ক্রেটরেঞ্জ (); রেঞ্জ.সিলক্টনোড (এল এল) ;) }

— হায়দার আব্বাস

Answer 12

সকলের কাছে সিএসএস সম্পত্তি ব্যবহারকারী-নির্বাচনের সেটটি সহজেই অর্জন করা হয়েছে। এটার মত:

div.anyClass {
  user-select: all;
}