একটি ডিআইভি অপছন্দযোগ্য করার উপায় আছে?

140

আপনার জন্য এখানে একটি আকর্ষণীয় সিএসএস প্রশ্ন!

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

css

— Whozumommy
সূত্র

আপনি একটি জাভাস্ক্রিপ্ট সমাধান সঙ্গে খুশি হবে?

— জোশকমলে

203

কিছুক্ষণ আগে নির্বাচনকে অক্ষম করার জন্য আমি একটি সাধারণ jQuery এক্সটেনশন লিখেছিলাম: jQuery এ নির্বাচন অক্ষম করা । আপনি এটি মাধ্যমে আবেদন করতে পারেন$('.button').disableSelection();

পর্যায়ক্রমে, সিএসএস (ক্রস ব্রাউজার) ব্যবহার করে:

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

— aleemb
সূত্র

@ ক্যাস্পারটিএইমেনস এটি উল্লেখ করার জন্য ধন্যবাদ। স্নিপেট আপডেট হয়েছে।

— আলেম্ব

@ ক্যাস্পারটাইম্যানস তবে এটি একটি ডাব্লু 3 সি ওয়ার্কিং ড্রাফ্টে আছে ... আমি কেবল এটির ক্ষেত্রে অন্তর্ভুক্ত করব।

— ক্যামিলো মার্টিন

2

মূল উত্তর থেকে কিছু না নেওয়ার জন্য, যা আমি উত্সাহিত করেছি, তবে এটি 3+ বছর পুরানো। সুতরাং আমি স্পর্শ ইন্টারফেসের জন্য একটি যুক্ত সেটিংস সহ নীচে একটি উত্তর ( stackoverflow.com/questions/924916/… ) যুক্ত করেছি।

— অ্যান গন

অস্থাবর বুটস্ট্র্যাপ মডেল শিরোলেখের জন্য আমি এটি চেয়েছিলাম! ধন্যবাদ!

— বিকাশকারী

62

নিম্নলিখিত সিএসএস কোড প্রায় আধুনিক ব্রাউজারে কাজ করে:

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

আই-এর জন্য, আপনাকে অবশ্যই জেএস ব্যবহার করতে হবে বা এইচটিএমএল ট্যাগে অ্যাট্রিবিউট .োকাতে হবে।

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

— KimKha
সূত্র

উদ্দেশ্য কী unselectable="on"। আপনি একটি রেফারেন্স দিতে পারেন দয়া করে

— ব্যবহারকারী

4

আমি এখানে পেয়েছি: এমএসডিএন.মাইক্রোসফট /en-us/library/hh801966(v=vs.85).aspx তবে আমি আসলে আই-তে পরীক্ষা করেছি এবং এটি সঠিকভাবে কাজ করে।

— কিমখা

1

আমি নিশ্চিত নই. তবে <code> unselectable = "on" </code> আই-তে অন্তর্ভুক্ত থাকতে পারে এবং ডাব্লু 3 সি বৈধকারক সেই বৈশিষ্ট্যটি গ্রহণ করে না।

— কিমখা

এটি আধুনিক ব্রাউজারগুলিতে কাজ করার সময়, এটি এখনও ডাব্লু 3 সি দ্বারা নির্দিষ্ট করা হয়নি।

— সিরো সান্তিলি :4 冠状病六四事件

41

কেবলমাত্র CSS এর সাথে কয়েকটি সংযোজন সহ আলেয়েমের আসল, বহু-উত্সাহিত উত্তরটি আপডেট করা হচ্ছে।

আমরা নিম্নলিখিত কম্বো ব্যবহার করছি:

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

ওয়েবকিট-টাচ এন্ট্রি যুক্ত করার জন্য আমরা এই পরামর্শটি পেয়েছি: http://phonegap-tips.com/articles/essential- iPhonegap-css-webkit-touch-
callout.html

২০১৫ এপ্রিল: স্রেফ নিজের উত্তরটি কার্যকর হতে পারে এমন একটি বৈচিত্রের সাথে আপডেট করছি। আপনি DIV নির্বাচনযোগ্য / মাছি উপর unselectable করতে হবে এবং ব্যবহার করতে ইচ্ছুক হন তাহলে Modernizr নিম্নলিখিত জাভাস্ক্রিপ্ট সুন্দরভাবে কাজ করে:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

— অ্যান গুন
সূত্র

user-select: noneএকটি প্রয়োগ করার divফলে কোনও প্রভাব নেই। আমি খুব নিশ্চিত user-selectযে শুধুমাত্র পাঠ্য জন্য। একটি divঅনির্বাচনযোগ্য করার জন্য অন্য কোনও উপায় আছে ?

— ওল্ডবয়

22

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

একটি জাভাস্ক্রিপ্ট সমাধান সমস্ত জনপ্রিয় ব্রাউজার জুড়ে কার্যকর হতে "ড্রাগস্টার্ট" প্রভাবিত করতে পারে।

javascript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

JQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

সমৃদ্ধ

— kim3er
সূত্র

13

আপনি pointer-events: none;আপনার সিএসএসে ব্যবহার করতে পারেন

div {
  pointer-events: none;
}

— লিনহ বাঁধ
সূত্র

6

আপনি এটি চেষ্টা করতে পারেন:

<div onselectstart="return false">your text</div>

— Fortega
সূত্র

1

ডাবল ক্লিকের মাধ্যমে নির্বাচন করা এখনও সম্ভব।

— সিলিং

6

পাঠ্যগ্রাহ্যের জন্য কি কোনও সাধারণ পটভূমি চিত্রটি যথেষ্ট নয়?

— জোয়ি
সূত্র

1

ঠিক আছে, আমি বরং জলছবিটি বোঝাতে চাইছিলাম তবে একটি স্বচ্ছ পটভূমি চিত্রটিও কাজ করতে পারে। সেইসাথে কিছু ব্রাউজারগুলি খুব ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে ধীরে আপনার ছোট ছবিও টাইল করবেন না

— জয়ে

বিশেষত যেহেতু 1000x1000 স্বচ্ছ png (বা জিআইএফ) কেবল 4 কেবি হয়।

— রায়ান ফ্লোরেন্স

1 কিবি এর মতো আরও: প্রকৃতপক্ষে :-)

— জোয়

4

ওয়েবকিট ব্রাউজারগুলিতে (অর্থাত্ গুগল ক্রোম এবং সাফারি) মজিলার-মোজ-ব্যবহারকারী-নির্বাচনের মতো একটি সিএসএস সমাধান রয়েছে: কিছুই নেই

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

— জেমস
সূত্র

2

এছাড়াও আইওএস-এ আপনি অন্বেষণ করে ধূসর আধা-স্বচ্ছ ওভারলেগুলি থেকে মুক্তি পেতে চাইলে CSS যুক্ত করুন:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

— আর্টজম কুরাপভ
সূত্র

-1

ব্যবহার

onseLivetart = "প্রত্যাবর্তন মিথ্যা"

এটি আপনার সামগ্রী অনুলিপি প্রতিরোধ করে।

— Anuraj
সূত্র

4

এই সমাধানটি অন্যরা পোস্ট করেছেন।

— dazedconfused

-1

নিশ্চিত হয়ে নিন যে আপনি নির্বাচনের জন্য কাজ করার জন্য জেড-ইনডেক্সের জন্য সুস্পষ্ট বা আপেক্ষিক হিসাবে অবস্থান নির্ধারণ করেছেন। আমার একই রকম সমস্যা ছিল এবং এটি আমার জন্য এটি সমাধান করেছে।

— এরিক গ্রটকে
সূত্র

-2

আপনার ব্যবহারের ক্ষেত্রে নিশ্চিত নয়, তবে আপনি এটিকে টেনে নিয়ে যেতে সক্ষম করতে পারেন।

— পঁজর
সূত্র

এটি একটি অপ্রীতিকর এখনও বৈধ উত্তর।

— মরিচা