সিএসএস পাঠ্য নির্বাচন অক্ষম করে


95

বর্তমানে, আমি পাঠ্য নির্বাচনগুলি অক্ষম করতে এটি বডি ট্যাগে রেখেছি:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

যাইহোক, আমার inputএবং textareaবাক্সগুলি এখন অনির্বাচিত। আমি কীভাবে কেবলমাত্র এই ইনপুট উপাদানগুলিকে বাছাইযোগ্য এবং বাকী অনির্বাচনযোগ্য করতে পারি?


আমি নির্বাচন করতে inputএবং textareaউপাদানগুলি সক্ষম করতে পেরেছি : jsfiddle.net/Smy26
স্যাম্পসন

দেখে মনে হচ্ছে যে ওয়েবকিট সেই উপাদানগুলিতে নির্বাচনের অনুমতি দেয়, তবে মোজ দেয় না।
খ্রিস্টান

উত্তর:


175

এই বৈশিষ্ট্যগুলি পুরো শরীরে প্রয়োগ করবেন না। তাদেরকে একটি শ্রেণিতে নিয়ে যান এবং যে শ্রেণীর উপাদানগুলি আপনি অক্ষম করতে চান তা সেই শ্রেণীর প্রয়োগ করুন:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

4
ক্রোমে সমর্থিত নয় , সাফারি।
নটোল

5
@ কুনটোল আবার টেবিলটি পড়ুন। মান এর elementক্রোম / সাফারিতে সমর্থিত নয়।
এমফোরমার্লন

32

আপনি সমস্ত উপাদানগুলিতে ব্যবহারকারী নির্বাচনকে অক্ষম করতে পারেন:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

এবং উপাদানগুলিতে এটি সক্ষম করার চেয়ে আপনি ব্যবহারকারীটি নির্বাচন করতে সক্ষম হতে চান:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

4
সম্পূর্ণ ব্রাউজার সমর্থনের জন্য আপনার <body> বা <ডিভি> উপাদানটিতে নিম্নলিখিত বৈশিষ্ট্যগুলি যুক্ত করা উচিত: অনিচ্ছাকৃত = "হ্যাঁ" অন্বেষণপ্রাপ্ত = "প্রত্যাবর্তন মিথ্যা" অনময়েডাউন = "মিথ্যা প্রত্যাবর্তন করুন" / * যত্ন সহকারে ব্যবহার করুন, শেষ বৈশিষ্ট্যটি অস্তিত্বের দুর্দান্ত কার্যকারিতাটি কার্যকর করতে পারে * /
ড্যান

11

কেবল সমস্ত কিছুর সংক্ষিপ্তসার চেয়েছিলেন:

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

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

4
ফায়ারফক্সের পুরানো সংস্করণগুলিতে এইচটিএমএলটিতে আরও একটি বৈশিষ্ট্য যুক্ত করা দরকার: অনময়েডাউন = "মিথ্যা ফিরুন"
ড্যান

2
::selection,::moz-selection {color:currentColor;background:transparent}

যেমন এখানে বলা হয়েছে w3schools.com/cssref/sel_selection.asp । এটি এখন পর্যন্ত কোনও সিএসএসের স্পেসিফিকেশনের অংশ নয়, এবং ফায়ারফক্সের জন্য-মোজ- প্রয়োজন। সুতরাং সঠিকটি হওয়া উচিত: :: - মোজ-নির্বাচন {রঙ: কারেন্ট কালার; পটভূমি: স্বচ্ছ selection :: নির্বাচন {রঙ: কারেন্ট কালার; পটভূমি: স্বচ্ছ}
ভ্লাদিস্লাভ

4
@ ভ্লাদিস্লাভ মোজ উপসর্গ সম্পর্কে ভাল পয়েন্ট। সত্যিই, ডাব্লু 3 স্কুলগুলিতে বিশ্বাস করবেন না। এটি এরকম ভয়ানক উত্স। MDN দেয় প্রকৃত ব্রাউজার উপযুক্ততা সংস্করণ এবং নোট যে :: নির্বাচন সিএসএস খসড়া থেকে অপসারণ করা হয়েছে, কিন্তু এ জুড়েছে হয়েছিল: developer.mozilla.org/en-US/docs/Web/CSS/::selection । অন্য দ্রষ্টব্য, ফায়ারফক্স উপসর্গটির প্রয়োজনীয়তা অপসারণ করতে প্রস্তুত: bugzilla.mozilla.org/show_bug.cgi?id=509958
বিটি

2

আপনি সমস্ত নির্বাচন অক্ষম করতে পারেন

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

এখন আপনি ইনপুট এবং পাঠ্য-অঞ্চল সক্ষম করতে পারবেন

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

1

*এই উদ্দেশ্যে একটি ওয়াইল্ড কার্ড নির্বাচনকারী ব্যবহার করুন।

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

এখন, আইডি সহ একটি ডিভের অভ্যন্তরের প্রতিটি উপাদানের divকোনও নির্বাচন থাকবে না।

ডেমো



0

আমি সামথ বিজয়ের সাথে একমত, আপনার নির্বাচিত হতে চান এমন কিছু উপাদানগুলির জন্য আপনাকে একটি নির্দিষ্ট শ্রেণি যুক্ত করতে হবে।

এছাড়াও, আপনি জাভাস্ক্রিপ্ট ব্যবহার করে নির্দিষ্ট ক্ষেত্রে এই শ্রেণিটি যুক্ত করতে পারেন। এখানে উদাহরণ সিএসএসের সাহায্যে সামগ্রীটিকে অপ্রকাশ্য করতে সক্ষম করা


0

নির্বাচন সর্বত্র অক্ষম করুন

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

আই 7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.