পাঠ্য নির্বাচন হাইলাইটিং কীভাবে অক্ষম করবেন

Question

অ্যাঙ্করগুলির জন্য যা বোতামগুলির মতো কাজ করে (উদাহরণস্বরূপ, স্ট্যাক ওভারফ্লো পৃষ্ঠার শীর্ষে প্রশ্ন , ট্যাগস , ব্যবহারকারী ইত্যাদি) বা ট্যাবগুলি, ব্যবহারকারী যদি ভুলবশত পাঠ্যটি নির্বাচন করে তবে হাইলাইটিং এফেক্টটি অক্ষম করার জন্য কি কোনও সিএসএস স্ট্যান্ডার্ড উপায় রয়েছে?

আমি বুঝতে পারলাম এটি জাভাস্ক্রিপ্টের সাহায্যে করা যেতে পারে এবং কিছুটা গুগলিং মোজিলা-কেবল -moz-user-selectবিকল্পটি পেয়েছিল ।

সিএসএস দিয়ে এটি সম্পাদন করার জন্য কি কোনও মান-মেনে চলার উপায় রয়েছে এবং যদি তা না হয় তবে "সেরা অনুশীলন" পদ্ধতির কী?

Comments

উপাদান ডাইনের মধ্যে থাকা উপাদানগুলি হাইলাইট করা অক্ষম করতে পারে, স্টাইল বা শ্রেণীর বৈশিষ্ট্যে সিএসএস সহ হাইলাইটিং সক্ষম করতে পারে? বা অন্য কথায়, -webkit- ব্যবহারকারী-নির্বাচন ect এর জন্য অন্যান্য মান আছে। শুধু কেউ ছাড়া অন্য?

সম্পর্কিত: stackoverflow.com/questions/16600479/… = কীভাবে কেবলমাত্র কয়েকটি শিশু উপাদানকে নির্বাচন করতে দেওয়া যায়

— জে.কে.

কিছু ব্রাউজারগুলিতে একটি বাগ রয়েছে যেখানে "সিলেক্ট অল" (সিটিআরএল + এ এবং সিএমডি + এ) এখনও জিনিসগুলি নির্বাচন করে। এটি একটি স্বচ্ছ নির্বাচনের রঙের সাথে লড়াই করা যেতে পারে: ::selection { background: transparent; } ::-moz-selection { background: transparent; }

— দাআউইউইলপি

আমি কি বলতে পারি: দয়া করে এটি করবেন না। আমার অভিজ্ঞতা থেকে, আমি প্রায়শই নিখুঁতভাবে এমন কোনও পাঠ্য নির্বাচন করতে চাই না যা এটি অন্য কোথাও অনুলিপি-আটকানোর জন্য একটি বোতাম হিসাবেও কাজ করে। এটি না করতে পারা অকল্পনীয়ভাবে উত্সাহজনক হবে কারণ কিছু ওয়েব বিকাশকারী আমার জন্য এই বৈশিষ্ট্যটি স্বতঃস্ফূর্তভাবে অক্ষম করতে গিয়েছিল their সুতরাং আপনার খুব, খুব ভাল কারণ না থাকলে দয়া করে এটি করবেন না ।

— kajacx

বছর 2017 সালে এটা আরও ভাল ব্যবহার করতে উপায় postcssএবং autoprefixerএবং সেট ব্রাউজার সংস্করণ, তারপর postcssসবকিছু শীতল কর।

— আমেরেলিকা

Answer 1

জানুয়ারী, 2017 আপডেট করুন:

আমি কী ব্যবহার করতে পারি তার মতে , user-selectবর্তমানে ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্ববর্তী সংস্করণগুলি বাদ দিয়ে সমস্ত ব্রাউজারগুলিতে এটি সমর্থিত (তবে দুঃখের সাথে এখনও বিক্রেতার উপসর্গ প্রয়োজন)।

---

সঠিক সিএসএসের বিভিন্নতা হ'ল:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

---

নোট যে user-selectমানীকরণ প্রক্রিয়াতে (বর্তমানে ডাব্লু 3 সি ওয়ার্কিং ড্রাফ্টে ) রয়েছে। এটি সর্বত্র কাজ করার গ্যারান্টিযুক্ত নয়, এবং ব্রাউজারগুলির মধ্যে প্রয়োগের ক্ষেত্রে পার্থক্য থাকতে পারে এবং ভবিষ্যতে ব্রাউজারগুলি এর পক্ষে সমর্থন বাদ দিতে পারে।

---

মজিলা বিকাশকারী নেটওয়ার্ক ডকুমেন্টেশনে আরও তথ্য পাওয়া যাবে ।

Comments

দুর্দান্ত কোড মলোকোলোকো: ডি, যদিও আমি ব্যক্তিগতভাবে এটি ব্যবহার করা থেকে দূরে থাকব, কারণ কখনও কখনও আপনার বিভিন্ন ব্রাউজারগুলির জন্য বিভিন্ন মানের প্রয়োজন হতে পারে এবং এটি জাভাস্ক্রিপ্টের উপর নির্ভর করে। একটি ক্লাস তৈরি করা এবং এটি আপনার উপাদানটিতে যুক্ত করা বা আপনার স্টাইল-শীটে আপনার ধরণের উপাদানটিতে সিএসএস প্রয়োগ করা বেশ বুলেট প্রুফ।

— ব্লুসি

'ব্যবহারকারীর বাছাই'- মান: কোনও | পাঠ্য | টগল | উপাদান | উপাদান | সব | উত্তরাধিকারী - w3.org/TR/2000/WD-css3-userint-20000216

— ব্লসী

প্রকৃতপক্ষে-ব্যবহারকারী-নির্বাচন অপেরাতে প্রয়োগ করা হয়নি। এটি পরিবর্তে আইইয়ের অনির্বাচনযোগ্য বৈশিষ্ট্য প্রয়োগ করে।

— টিম ডাউন

কোনও কারণে, এই একা আইই 8 তে কাজ করতে চাইছিল না, আমি তখন <div onselectstart="return false;">আমার মূল ডিভিতে যুক্ত করেছি।

— রোবস্ট

এটা হাস্যকর! একই জিনিসটি করার বিভিন্ন উপায়। আসুন ব্যবহারকারী নির্বাচনের জন্য একটি নতুন মান তৈরি করুন। আমরা এটি কল করব standard-user-select। তাহলে আমাদের এই সমস্যাগুলি হবে না। যদিও পিছনের সামঞ্জস্যের জন্য আমাদের অন্যদেরও অন্তর্ভুক্ত করা উচিত। সুতরাং এখন কোড হয়ে যায় -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;। আহ, আরও ভাল।

— ক্লদিউ

Answer 2

বেশিরভাগ ব্রাউজারগুলিতে, সিএসএস user-selectবৈশিষ্ট্যে মালিকানাগত বৈচিত্রগুলি ব্যবহার করে এটি অর্জন করা যেতে পারে , মূলত প্রস্তাবিত এবং তারপরে সিএসএস 3 এ পরিত্যাগ করা হয় এবং এখন সিএসএস ইউআই স্তর 4 এ প্রস্তাবিত :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

ইন্টারনেট এক্সপ্লোরার <10 এবং অপেরা <15 এর জন্য, আপনি unselectableযে উপাদানটি অনির্বাচনযোগ্য হতে চান তার বৈশিষ্ট্যটি ব্যবহার করতে হবে। আপনি এইচটিএমএলে একটি বৈশিষ্ট্য ব্যবহার করে এটি সেট করতে পারেন:

<div id="foo" unselectable="on" class="unselectable">...</div>

দুঃখের বিষয় এই সম্পত্তিটি উত্তরাধিকার সূত্রে প্রাপ্ত নয়, এর অর্থ আপনাকে এর ভিতরে থাকা প্রতিটি উপাদানের প্রারম্ভক ট্যাগের মধ্যে একটি গুণ রাখতে হবে <div>। যদি এটি কোনও সমস্যা হয়ে থাকে তবে আপনি এটির পরিবর্তে কোনও উপাদানটির বংশধরদের জন্য এটি জাভা স্ক্রিপ্ট ব্যবহার করতে পারেন:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

---

30 এপ্রিল 2014 আপডেট করুন : যখনই গাছটিতে একটি নতুন উপাদান যুক্ত হয় তখন এই গাছের ট্র্যাভারসালটি পুনরায় চালু করা দরকার তবে @ হানের একটি মন্তব্য থেকে মনে হয় যে mousedownইভেন্ট হ্যান্ডলার যোগ করে এটির unselectableলক্ষ্যমাত্রায় সেট করে এটি এড়ানো সম্ভব the ইভেন্ট। বিশদ জানতে http://jsbin.com/yagekiji/1 দেখুন ।

---

এটি এখনও সমস্ত সম্ভাবনা কভার করে না। কিছু ব্রাউজারে (যেমন ইন্টারনেট এক্সপ্লোরার এবং ফায়ারফক্স, উদাহরণস্বরূপ) অনির্বাচনযোগ্য উপাদানগুলিতে নির্বাচনগুলি শুরু করা অসম্ভব হলেও পুরো দস্তাবেজটি অনির্বাচনযোগ্য না করে অনির্বাচনীয় উপাদানগুলির আগে শুরু হওয়া এবং শেষ হওয়া নির্বাচনগুলি রোধ করা এখনও অসম্ভব।

Comments

আপনার উদাহরণটি থেকে আপনার নির্বাচকটিকে অপসারণ করা উচিত, এটি সত্যই দক্ষ এবং দক্ষতার সাথে এটি ব্যবহার করার দরকার নেই?

— ব্লুসি

@ ব্লোজি: আমি এটি মনে করি না: সিএসএস 2 টি সূত্রে উল্লেখ করা হয়েছে যে *.fooএবং .fooযথাযথভাবে সমতুল্য (দ্বিতীয় ক্ষেত্রে, সর্বজনীন নির্বাচক ( *) বোঝানো হয়েছে), তাই ব্রাউজারের কৌতুক বাদ দিয়ে আমি দেখতে পাচ্ছি না যে উইলটি সহ *ক্ষতি হবে কিনা কর্মক্ষমতা. এটি আমার অন্তর্ভুক্ত করার দীর্ঘকালীন অভ্যাস *, যা আমি মূলত পাঠযোগ্যতার জন্য করতে শুরু করেছিলাম: এটি স্পষ্টভাবে এক নজরে বলেছে যে লেখক সমস্ত উপাদানকে মেলাতে চান।

— টিম ডাউন

আরও কিছু পড়ার পরে, মনে হয় এটি কী (অধ্যাত্মতম নির্বাচক) অর্থাৎ .উনসलेक्टেবল * হিসাবে ব্যবহার করার সময় কেবল অ-কার্যকর হয়। এখানে আরও তথ্য এখানে কোড. google.com/speed/page-speed/docs/…

— ব্লোজি

শ্রেণি = "অপছন্দযোগ্য" ব্যবহারের পরিবর্তে, কেবলমাত্র বৈশিষ্ট্য নির্বাচনকারী [[unselectable = "on"]] ব্যবহার করুন {…}

— ক্রিস ক্যালো

@ ফ্রাঙ্কিস্ক: না। আমি ব্লোসিকে মন্তব্যে আগে যেমন বলেছিলাম, এতে ঠিক কোন পার্থক্য নেই।

— টিম ডাউন

Answer 3

ইন্টারনেট এক্সপ্লোরারের জন্য একটি জাভাস্ক্রিপ্ট সমাধান হ'ল:

onselectstart="return false;"

Comments

সম্পর্কে ভুলবেন না ondragstart!

— ম্যাথিয়াস বাইনেন্স

এখানে আরও একটি জিনিস। আপনি যদি এটি শরীরে যোগ করেন তবে আপনি টেক্সারি এবং আইইউতে ইনপুট ক্ষেত্রের ভিতরে পাঠ্য নির্বাচন করতে পারবেন না। আইইয়ের জন্য আমি যেভাবে এটি স্থির করেছি। body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }

— দ্য ব্রেন

এটি একটি অ্যাট্রিবিউট ব্যবহার করে jQuery এর হিসেবে যোগ করতে পারেন -। $ ( "পি") ATTR ( "onselectstart", "রিটার্ন মিথ্যা") এই IE8 আমার জন্য শুধুমাত্র নির্ভরযোগ্য পদ্ধতি ছিল

— ম্যাট

@ আবদায়াহ কারণ তারা ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলিতে কাজ করে না? যেমন, এই উত্তর পুরো পয়েন্ট।

— পেক্কা

?? আমি এখনও inputব্যবহার করলেও উপাদানগুলিতে সর্বদা পাঠ্য নির্বাচন করতে পারি user-select: none। আমি কীভাবে এটি প্রতিরোধ করতে হবে তা জানতে হবে

— ওল্ডবয়

Answer 4

সিএসএস 3 এর ব্যবহারকারী-নির্বাচিত সম্পত্তি উপলব্ধ না হওয়া অবধি গেকো- ভিত্তিক ব্রাউজারগুলি -moz-user-selectআপনার ইতিমধ্যে পাওয়া সম্পত্তিটিকে সমর্থন করে । ওয়েবকিট এবং ব্লিঙ্ক-ভিত্তিক ব্রাউজারগুলি -webkit-user-selectসম্পত্তি সমর্থন করে ।

এই অবশ্যই ব্রাউজারগুলিতে সমর্থিত নয় যা গেকো রেন্ডারিং ইঞ্জিন ব্যবহার করে না।

এটি করার পক্ষে কোনও "মানদণ্ড" মেনে চলার দ্রুত এবং সহজ উপায় নেই; জাভাস্ক্রিপ্ট ব্যবহার করা একটি বিকল্প।

আসল প্রশ্নটি হল আপনি ব্যবহারকারীরা কেন নির্দিষ্ট উপাদানগুলিকে হাইলাইট এবং সম্ভবত অনুলিপি করতে এবং কাস্ট করতে পারবেন না? আমি একবারেও আসিনি যে আমি ব্যবহারকারীদেরকে আমার ওয়েবসাইটের একটি নির্দিষ্ট অংশ হাইলাইট করতে দিতে চাইনি। আমার বেশিরভাগ বন্ধুবান্ধব, কোড পড়ার এবং লেখার জন্য বেশ কয়েক ঘন্টা ব্যয় করার পরে হাইলাইট বৈশিষ্ট্যটি তারা কী পৃষ্ঠায় ছিল তা স্মরণ করার জন্য বা একটি মার্কার সরবরাহ করার জন্য ব্যবহার করবে যাতে তাদের চোখের সামনে কোথায় দেখতে হবে তা জানতে পারে।

আমি কেবল এটি দরকারী হিসাবে দেখতে পাচ্ছিলাম হ'ল যদি আপনার কাছে এমন ফর্মগুলির জন্য বোতাম থাকে যা কোনও ব্যবহারকারী অনুলিপি করে এবং ওয়েবসাইটটি পেস্ট করে থাকে তবে অনুলিপি করা হবে না।

Comments

বোতাম জিনিস আমার অনুপ্রেরণা হবে।

— ক্রিমে

গ্রিড বা টেবিলের একাধিক সারি নির্বাচন করতে শিফট-ক্লিক করা প্রয়োজন এর অন্য কারণ। আপনি পাঠ্যটি হাইলাইট করতে চান না, আপনি এটি সারিগুলি নির্বাচন করতে চান।

— গর্ডন টকার

এখানে আইনী সমস্যা রয়েছে যেখানে অন্য কারও বিষয়বস্তু আইনত পুনঃপ্রকাশ করা হচ্ছে তবে লাইসেন্সের একটি ধারাতে ওয়েব প্রকাশকদের দরকার হয় পাঠ্য সহজে অনুলিপি করা এবং আটকাতে বাধা দেওয়া। এটিই আমাকে এই প্রশ্নটি সন্ধান করতে পরিচালিত করেছিল। আমি প্রয়োজনীয়তার সাথে একমত নই তবে আমি যে সংস্থার সাথে চুক্তি করছি তা আইনীভাবে এটিকে বাস্তবায়নের জন্য বাধ্য।

— ক্রেগ এম

@ ক্রেইগএম সিএসএস স্টাইল কোনও ব্যক্তিকে এইচটিএমএল উত্সটি ধরার এবং অনুলিপি করা থেকে বিরত রাখে না। আপনি যদি আপনার সামগ্রী সংরক্ষণ করতে চান তবে আপনাকে আরও ভাল উপায় খুঁজে পেতে হবে to

— চটপটে জেডি

প্রচুর টানুন এবং ড্রপ সহ উচ্চতর ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশন ... দুর্ঘটনাজনিত হাইলাইট করা একটি বড় ব্যবহারের সমস্যা।

— মার্ক হিউজেস

Answer 5

আপনি যদি <p>উপাদানগুলি ব্যতীত অন্য কোনও বিষয়তে পাঠ্য নির্বাচনকে অক্ষম করতে চান তবে আপনি এটি সিএসএসে করতে পারেন ( -moz-noneসাব-এলিমেন্টগুলিতে ওভাররাইডের অনুমতি দেয় যা এর সাথে অন্য ব্রাউজারগুলিতে অনুমোদিত none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Comments

p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }

— আপনিও

একটি আইটেম বাদে সমস্ত কোডে ব্রাউজারের ইউআই প্রত্যাশাগুলি বন্ধ করার বিষয়ে খুব সতর্ক থাকুন। <আই / লিস্টের তালিকার আইটেমগুলির উদাহরণস্বরূপ কী?

— জেসন টি ফেদারিংহ্যাম

এমডিএন অনুসারে কেবল একটি আপডেট ... ফায়ারফক্স ২১ থেকে -moz-noneএবং noneএকই রকম।

— কেভিন ফেগান

এর জন্য আপনি কার্সার যুক্ত করতে পারেন: ডিফল্ট এবং কার্সার: যথাক্রমে পাঠ্য:)

— T4NK3R

বোমা। ঐটাই বলতে হবে. শেষ। ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[একটি নিরক্ষিত তালিকায় সমস্ত কিছু নির্বাচন করে এবং পুরো ভিউ ট্রিটিকে আবদ্ধ করার পরিবর্তে এটি অ-নির্বাচনযোগ্য করে তোলে]] পাঠের জন্য ধন্যবাদ। আমার বোতামের তালিকাটি দুর্দান্ত দেখাচ্ছে এবং আইএমই (অ্যান্ড্রয়েড ক্লিপবোর্ড উইজেটস) প্রবর্তন না করে স্ক্রিন টেপিং এবং টিপে সঠিকভাবে প্রতিক্রিয়া জানাচ্ছে।

— হাইপারসটফ সিস্টেমগুলি

Answer 6

পূর্ববর্তী উত্তরের সমাধানগুলিতে নির্বাচন বন্ধ হয়ে গেছে, তবে ব্যবহারকারী এখনও মনে করেন আপনি পাঠ্য নির্বাচন করতে পারবেন কারণ কার্সারটি এখনও পরিবর্তিত হয়েছে। এটি স্থির রাখতে, আপনাকে আপনার সিএসএস কার্সার সেট করতে হবে:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

এটি আপনার পাঠ্যটিকে পুরোপুরি সমতল করে তুলবে, যেমন এটি কোনও ডেস্কটপ অ্যাপ্লিকেশনে থাকে।

Comments

"ফ্ল্যাট" এর বিরোধিতা কি?

— kojow7

@ কোজো 7 "স্তরযুক্ত" এর বিপরীতে। পরিবর্তে অন্য উপাদানগুলির উপরে পাঠ্য ভাসমান। এটি এসভিজি এবং পিএনজি চিত্রগুলির মধ্যে পার্থক্যের অনুরূপ।

— ইয়েতি

আবিষ্কার যে ফায়ারফক্স এখনও 2019. মধ্যে বিক্রেতা উপসর্গ প্রয়োজন আমি disregardfully শুধুমাত্র ব্যবহৃত অবাক হয়ে user-select: none;, মানক চিন্তা এখন দ্বারা গৃহীত হবে, কিন্তু দুঃখিতভাবে এটা না হয়েছে। আপনাকে অবাক করে তোলে যে স্ট্যান্ডার্ড কমিটির লোকেরা এখনও বিতর্ক করতে পারে। "না, ছেলেরা ... আমি সত্যিই মনে করি এটি হওয়া উচিত user-select: cant;কারণ এটি আরও বর্ণনামূলক, আপনি জানেন?" "মাইক আমরা শেষ হয়ে গেলাম। আমাদেরকে অ্যাস্টোস্ট্রোফ বাদ দিতে হবে, এবং এটি খারাপ রূপ!" "যথেষ্ট, সবাই! আমরা পরের মাসে এই বিষয়টি নিয়ে ইচ্ছাকৃতভাবে আলোচনা করব। স্ট্যান্ডার্ড কমিটির সভা স্থগিত!"

— মেন্টালিস্ট

Answer 7

আপনি ফায়ারফক্স এবং সাফারি (ক্রোম এছাড়াও?) এ এটি করতে পারেন

::selection { background: transparent; }
::-moz-selection { background: transparent; }

Comments

আমি এটি করার পরামর্শ দেব না, কারণ এটি আসলে সমস্যাটি সমাধান করে না; পাঠ্য নির্বাচনটি অক্ষম করা হচ্ছে - এটি কেবল এটি গোপন করে। এটি খারাপ ব্যবহারযোগ্যতার দিকে নিয়ে যেতে পারে, কারণ যদি আমি পৃষ্ঠার চারপাশে আমার কার্সারটিকে টেনে আনি তবে আমি এটি না জেনে যেকোন স্বেচ্ছাসেবী পাঠ্য নির্বাচন করতে পারি। এটি সমস্ত ধরণের অদ্ভুত ব্যবহারযোগ্যতা "বাগগুলি" তৈরি করতে পারে।

— কেথামাস

স্বচ্ছ অঞ্চলগুলির সাথে পিএনজি-চিত্রগুলিতে কাজ করে না: সর্বদা হালকা নীল রঙে নির্বাচন করা হবে ... কোনও কার্যকারিতা?

— এভিএল

Answer 8

ওয়েবকিটের জন্য কার্যকর :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

আমি এটি একটি কার্ডফ্লিপ উদাহরণে পেয়েছি।

Comments

ব্যবহার transparentrgba পরিবর্তে, Android এ Chrome 42 কাজ করে।

— ক্লিন্ট পাচল

Answer 9

আমি হাইব্রিড CSS + jQuery সমাধান পছন্দ করি।

<div class="draggable"></div>অনির্বাচনযোগ্য ভিতরে সমস্ত উপাদান করতে , এই সিএসএস ব্যবহার করুন:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

এবং তারপরে আপনি যদি jQuery ব্যবহার করেন তবে এটি একটি $(document).ready()ব্লকের মধ্যে যুক্ত করুন:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

আমি অনুমান করি যে আপনি এখনও কোনও ইনপুট উপাদানগুলি ইন্টারঅ্যাকটিভ হতে চান, সুতরাং :not()সিউডো-নির্বাচক। আপনি '*'যদি যত্ন না করেন তবে আপনি পরিবর্তে ব্যবহার করতে পারেন ।

ক্যাভেট: ইন্টারনেট এক্সপ্লোরার 9 এর জন্য এই অতিরিক্ত জিকুয়েরি টুকরোটির দরকার পড়বে না, তাই আপনি সেখানে একটি সংস্করণ চেক যুক্ত করতে চাইতে পারেন।

Comments

ব্যবহারকারীর-ব্যবহারকারী-নির্বাচন: কিছুই নয়; (

— আইই

সাবধান মানুষ !!! ফায়ারফক্সে এটি বাছাইযোগ্য করার জন্য আপনাকে অবশ্যই ব্যবহার করতে হবে-moz-user-select: Normal;

— নিকোলাস থেরি

@ mhenry1384 jQuery.browserসংস্করণ 1.3 হিসাবে অবচয় করা হয়েছে এবং 1.9 সংস্করণে অপসারণ করা হয়েছে - api.jquery.com/jQuery.browser

— WynandB

@ উইনানড গুড পয়েন্ট তবে কোন সিএসএস সম্পত্তি ব্যবহার করতে হবে তা নির্ধারণ করতে কোন ধরণের "বৈশিষ্ট্য সনাক্তকরণ" বিদ্যমান?

— টম অাগার

@ টমআউগার আপনি jQuery.support ব্যবহার করতে পারেন, এটি আপনাকে একক বৈশিষ্ট্য যাচাই করতে দেয়: লিঙ্ক

— Aequanox

Answer 10

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

যদিও এটি সবচেয়ে ভাল উপায় নয়।

Comments

আপনি titleবৈশিষ্ট্য হিসাবেও ব্যবহার করতে পারেন ।

— টুথব্রাশ

এটি একটি খুব সৃজনশীল সমাধান। বিশেষত যদি এটি শিরোনাম বৈশিষ্ট্যটি ব্যবহার করে কারণ এটি সম্ভবত পর্দার পাঠকদের পক্ষে আরও ভাল।

— সিউডোস্যাভ্যান্ট

আমি এটি ( জেএসবিন ) চেষ্টা করেছিলাম এবং এটি আইই তে কাজ করে না। দুর্ভাগ্যক্রমে পুরানো আইইগুলি কেবল সেইগুলির user-selectজন্য কাজ করে না।

— সিউডোস্যাভ্যান্ট

এটি ক্রোমে কাজ করে এমন একটি দুর্দান্ত নন-জেএস বিকল্প! অসাধারণ!

— স্যারিকডেন

চমত্কার! ......

— একাকী

Answer 11

আপনি এটির জন্য সিএসএস বা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন ।

জাভাস্ক্রিপ্ট ভাবে সমর্থিত পুরোনো ব্রাউজার, মত পুরাতন পাশাপাশি Internet Explorer এর সংস্করণ, কিন্তু যদি এটা আপনার ক্ষেত্রে নয়, তারপর সিএসএস উপায় ব্যবহার করুন:

এইচটিএমএল / javascript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

এইচটিএমএল / সিএসএস:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Answer 12

ইন্টারনেট এক্সপ্লোরারের পাশাপাশি, আপনাকে সিউডো ক্লাসfocus (। ক্লাসনাম: ফোকাস) এবং যুক্ত করতে হবে outline-style: none।

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

Comments

classNameক্লাসের সাথে কোনও উপাদানটিতে বাছাই শুরু হওয়ার সাথে সাথে এটি IE এ কাজ করে । এই জেএসবিন দেখুন ।

— সিউডোস্যাভ্যান্ট

Answer 13

এই সারিগুলি সিএসএসে sertোকানোর চেষ্টা করুন এবং শ্রেণীর সম্পত্তিতে "ডিসহাইটলাইট" কল করুন:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Answer 14

একটি দ্রুত হ্যাক আপডেট

আপনি যদি noneসমস্ত সিএসএস user-selectবৈশিষ্ট্যের (এটির ব্রাউজারের উপসর্গ সহ) মান ব্যবহার করেন তবে একটি সমস্যা আছে যা এখনও এর দ্বারা ঘটতে পারে।

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

সিএসএস-ট্রিকস যেমন বলেছে, সমস্যাটি হ'ল:

ওয়েবকিট এখনও পাঠ্যটিকে অনুলিপি করার অনুমতি দেয়, যদি আপনি এর আশেপাশের উপাদানগুলি নির্বাচন করেন।

আপনি নীচের একটিটিও ব্যবহার করতে পারেন enforceযে পুরো উপাদানটি নির্বাচিত হয়ে যায় যার অর্থ আপনি যদি কোনও উপাদানটিতে ক্লিক করেন তবে element উপাদানটিতে মোড়ানো সমস্ত পাঠ্য নির্বাচন করা হবে। এর জন্য আপনাকে যা করতে হবে তা হ'ল মান পরিবর্তন noneকরা all।

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

Answer 15

যাদের স্পর্শ ইভেন্ট সহ অ্যান্ড্রয়েড ব্রাউজারে এটি অর্জন করতে সমস্যা হয় তাদের জন্য:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

Answer 16

আপনি যদি কম এবং বুটস্ট্র্যাপ ব্যবহার করেন লিখতে পারেন:

.user-select(none);

Answer 17

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

Answer 18

ওয়ার্কিং

সিএসএস:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

এটি কাজ করা উচিত, তবে এটি পুরানো ব্রাউজারগুলির জন্য কাজ করবে না। একটি ব্রাউজার সামঞ্জস্য সমস্যা আছে।

Comments

অনির্ধারিত CSS বৈশিষ্ট্যটি অবশ্যই সম্পত্তিটির উপসর্গীকৃত সংস্করণগুলির তালিকার শেষে অবশ্যই হওয়া উচিত। এটি যথাযথ অনুশীলন, অন্যটি খারাপ অনুশীলন ক্রোম / ওয়েবকিট থেকে "নতুন আইই" তৈরি করা এবং ওয়েবকিট ব্রাউজারগুলিতে নয়-ওয়েবকিট প্রিফিক্স সমর্থন হিসাবে প্রচুর কুখ্যাত জিনিসগুলিকে প্রবর্তন করে। দেখুন, এটি ইতিমধ্যে ২০১২ সালে ছিল: dev.opera.com/articles/…

— ফ্লেমেস্টর্ম

এবং আমি উদ্ধৃতি দিয়েছি:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.

— ফ্লেমস্টোরম

Answer 19

সঙ্গে Sass (SCSS সিনট্যাক্স)

আপনি এটি একটি মিশ্রণ দিয়ে করতে পারেন :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

এইচটিএমএল ট্যাগে:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

---

এই কোডপেন এ চেষ্টা করুন ।

আপনি যদি কোনও অটোপ্রিফিক্সার ব্যবহার করেন তবে আপনি অন্যান্য উপসর্গগুলি মুছে ফেলতে পারেন।

ব্রাউজারের সামঞ্জস্য এখানে ।

Answer 20

মোজিলা-কেবল সম্পত্তি বাদে, না, কেবলমাত্র স্ট্যান্ডার্ড সিএসএস (এখনকার হিসাবে) দিয়ে পাঠ্য নির্বাচন অক্ষম করার কোনও উপায় নেই।

যদি আপনি লক্ষ্য করেন, স্ট্যাক ওভারফ্লো তাদের নেভিগেশন বোতামগুলির জন্য পাঠ্য নির্বাচনকে অক্ষম করে না এবং আমি বেশিরভাগ ক্ষেত্রেই এটি করার বিরুদ্ধে সুপারিশ করব, কারণ এটি সাধারণ নির্বাচনের আচরণকে পরিবর্তন করে এবং এটি ব্যবহারকারীর প্রত্যাশার সাথে বিরোধী করে তোলে।

Comments

যদিও আমি একমত যে এটি ব্যবহারকারীর প্রত্যাশিত আচরণকে পরিবর্তন করে, এই ফর্ম ফিল্ডের পাশে বসে থাকা "মন্তব্য যুক্ত করুন" বোতামের মতো জিনিসগুলির জন্য এটি বোধগম্য হবে ...

— এক্স-ইয়েশন

কিন্তু এটি কি অপ্রয়োজনীয় বাস্তবায়ন বিশদটি প্রকাশ করে না? একটি ইনপুট বা বোতামের পাঠ্য নির্বাচন করা যায় না।

@ অ্যানন: বেশিরভাগ ব্যবহারকারী সম্ভবত আপনার বোতামের পাঠ্য নির্বাচন করার চেষ্টা করবেন না, তাই বাস্তবে এটি খুব বেশি গুরুত্ব পাবে না। এছাড়াও, এটি করার জন্য, তাদের বোতামের বাইরে বাছাই শুরু করতে হবে — যদি তারা নিজেই বোতামটির ভিতরে ক্লিক করেন তবে পরিবর্তে অনক্লিক হ্যান্ডলারটি সক্রিয় হবে। এছাড়াও, নির্দিষ্ট ব্রাউজারগুলি (যেমন সাফারি) আসলে আপনাকে সাধারণ বোতামের পাঠ্যটি নির্বাচন করতে দেয় ...

— এইচবিডাব্লু

আপনি যদি চ্যাট থ্রেড থেকে মন্তব্যের একটি সেট নির্বাচন করছেন এবং প্রতিটি মন্তব্যে তার পাশেই একটি উঁচু / ডাউনভোট বোতাম রয়েছে, তবে অন্য জিনিসগুলি ছাড়াই পাঠ্যটি নির্বাচন করা ভাল লাগবে। ব্যবহারকারী এটিই প্রত্যাশা করেন বা চান। তিনি প্রতিটি মন্তব্যে বোতামের লেবেলগুলি অনুলিপি / পেস্ট করতে চান না।

— Mnebuerquo

এবং যদি আপনি উদাহরণস্বরূপ কোনও বোতামটিতে ডাবল ক্লিক করেন যা আপনাকে অন্য পৃষ্ঠায় পুনঃনির্দেশের পরিবর্তে একটি ডিভ খোলে? তারপরে ডাবল ক্লিকের কারণে বোতামটির জন্য পাঠ্যটি নির্বাচন করা হবে!

— গিগালা

Answer 21

এটি কিছু ব্রাউজারে কাজ করে:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

শূন্যস্থান ছাড়াই কমা দ্বারা পৃথক নির্বাচিতদের সামনে আপনার পছন্দসই উপাদান / আইডিগুলি কেবল যুক্ত করুন:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

অন্য উত্তরগুলি আরও ভাল; এটি সম্ভবত একটি শেষ অবলম্বন / ক্যাচল হিসাবে দেখা উচিত।

Comments

কয়েকটি জিনিস রয়েছে যা নিশ্চিতভাবে জানা যেতে পারে, তবে এই সমাধানটি অবশ্যই সমস্ত ব্রাউজারে কাজ করে না ।

— ভোলকার ই।

Answer 22

মনে করুন divএর মতো দুটি রয়েছে :

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

ডিফল্টটিতে কার্সার সেট করুন যাতে এটি ব্যবহারকারীর জন্য একটি অনির্বাচিত অনুভূতি দেয়।

সমস্ত ব্রাউজারে এটি সমর্থন করার জন্য উপসর্গ ব্যবহার করা প্রয়োজন। উপসর্গ ব্যতীত এটি সমস্ত উত্তরে কাজ করতে পারে না।

Answer 23

রঙ নির্বাচনের প্রয়োজন না হলে এটি কার্যকর হবে:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... অন্য সমস্ত ব্রাউজারের ফিক্স। এটি ইন্টারনেট এক্সপ্লোরার 9 বা তার পরে কাজ করবে ।

Comments

এটা color: inherit;সম্ভবত করুন।

— ইয়াকভ আইনস্পান

হ্যাঁ আমি এটা ভালবাসি এটি মজিলা ডক্স

— বারিক ধর্মওয়ান

Answer 24

এটি প্রথম বিভাগে যুক্ত করুন যেখানে আপনি পাঠ্যের জন্য নির্বাচনটি অক্ষম করতে চান:

onmousedown='return false;' 
onselectstart='return false;'

Answer 25

বিঃদ্রঃ:

সঠিক উত্তরটি সঠিক যে এটি আপনাকে পাঠ্য নির্বাচন করতে সক্ষম হতে বাধা দেয়। তবে এটি আপনাকে পাঠ্যটি অনুলিপি করতে সক্ষম হতে বাধা দেয় না, যেমন আমি পরের কয়েকটি স্ক্রিনশট (7 ই নভেম্বর 2014) এর সাথে দেখাব show

আপনি দেখতে পাচ্ছেন যে, আমরা সংখ্যাগুলি নির্বাচন করতে পারিনি, তবে আমরা সেগুলি অনুলিপি করতে সক্ষম হয়েছি।

পরীক্ষিত: উবুন্টু , গুগল ক্রোম 38.0.2125.111।

Comments

আমারও একই সমস্যা ছিল ম্যাক ক্রোমে 48.0.2564.116 এবং ম্যাক সাফারি 9.0.3 এ। উল্লেখযোগ্যভাবে, ম্যাক ফায়ারফক্স ৪৩.০ চরিত্রটি অনুলিপি করে না, তবে তাদের মধ্যে অতিরিক্ত লাইন আটকে দেয়। এই সম্পর্কে কি করা উচিত?

— এনএইচডালি

Answer 26

আমার যে ফলাফলটি প্রয়োজন তা পেতে, আমি খুঁজে পেলাম যে আমাকে ::selectionএবং উভয়ই ব্যবহার করতে হয়েছিলuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

Comments

ফাইনালিউইউইইউ একটি উত্তর যা কাজ করে

— Oldboy

Answer 27

এটি সহজেই এর সাথে সম্পন্ন হয়:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

---

বিকল্পভাবে:

ধরা যাক আপনার একটি আছে <h1 id="example">Hello, World!</h1>। হ্যালো, ওয়ার্ল্ডh1 এই ক্ষেত্রে আপনাকে তার অন্তর্নিহিত এইচটিএমএল সরিয়ে ফেলতে হবে । তারপরে আপনাকে সিএসএসে যেতে হবে এবং এটি করতে হবে:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

এখন এটি সহজভাবে মনে করে এটি একটি ব্লক-উপাদান, এবং পাঠ্য নয়।

Answer 28

এটি সিএসএস নয়, তবে এটি উল্লেখ করার মতো:

jQuery UI নির্বাচন অক্ষম করুন :

$("your.selector").disableSelection();

Answer 29

জাভাস্ক্রিপ্ট ছাড়াই আমার সমাধানটি পরীক্ষা করুন:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

আমার কৌশল প্রয়োগ করে পপআপ মেনু: http://jsfiddle.net/y4Lac/2/

Answer 30

যদিও এই সিউডো উপাদানটি সিএসএস নির্বাচক স্তর 3 এর খসড়াগুলিতে ছিল, এটি প্রার্থী সুপারিশ পর্বের সময় এটি সরিয়ে ফেলা হয়েছিল, কারণ দেখা গেছে যে এর আচরণটি নীচে নির্দিষ্ট করা হয়েছে, বিশেষত নেস্টেড উপাদানগুলির সাথে, এবং আন্তঃব্যবহারযোগ্যতা অর্জন করা হয়নি।

কীভাবে :: নির্বাচন নেস্টেড উপাদানগুলিতে নির্বাচন কাজ করে তা নিয়ে আলোচনা হচ্ছে ।

এটি ব্রাউজারগুলিতে কার্যকর করা সত্ত্বেও, আপনি ট্যাব নকশার (আপনার ক্ষেত্রে) নির্বাচনের ক্ষেত্রে একই রঙ এবং পটভূমির রঙ ব্যবহার করে নির্বাচিত না হওয়া পাঠ্যের একটি বিভ্রম তৈরি করতে পারেন।

সাধারণ সিএসএস ডিজাইন

p { color: white;  background: black; }

নির্বাচন উপর

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

ব্যবহারকারীদের পাঠ্যটি নির্বাচন করতে না দেওয়ার ফলে ব্যবহারের বিষয় উত্থাপিত হবে।

Comments

এই কারণেই নেটবিনের স্বয়ংক্রিয় সমাপ্তির কোনও ধারণা নেই যে আমি কী বলছি!

— অর্ধেক