কীভাবে jQuery ব্যবহার করে পাঠ্য নির্বাচনকে অক্ষম করবেন?


198

JQuery বা jQuery-UI প্রদত্ত নথি উপাদানগুলির জন্য পাঠ্য নির্বাচন অক্ষম করার জন্য কোনও কার্যকারিতা রয়েছে কি?



@ জন: উপরের লিঙ্কটি কি আপনার প্রশ্নের উত্তর দেয়? যদি এটি না হয় তবে আপনি কীভাবে আপনার পরিস্থিতিটি আলাদা তা সম্পর্কে আরও কিছু বিশদ লিখতে চাইতে পারেন।
জর্ন শো-রোড

1
হ্যাঁ এটা করে. তবে উত্তরটি একই হলেও, এই প্রশ্নটি খুব নির্দিষ্ট is
দাউদ ওহিয়া

@ ঝন: অন্য প্রশ্নেরও জিকুরি সমাধান রয়েছে।
ওমর আবিদ

উত্তর:


274

JQuery 1.8 এ, নিম্নলিখিত হিসাবে এটি করা যেতে পারে:

(function($){
    $.fn.disableSelection = function() {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
    };
})(jQuery);

1
জাভাস্ক্রিপ্ট বিকল্প কেবল আইই এর জন্য কাজ করে। অন্যান্য ব্রাউজারগুলির জন্য "অন্বেষণকারী স্টার্ট" উপলভ্য নেই
ওমর আবিদ

13
@ ওমর: আমি এ সম্পর্কে ভাল জানি।
স্ল্যাक्स


11
এর জন্য ধন্যবাদ. আমি একটি টেনে আনার স্লাইডারে কাজ করছিলাম এবং এমন একটি উপায়ের দরকার ছিল যাতে প্রক্রিয়াটিতে পাঠ্যটি নির্বাচন করা যায় না।
স্পেন্সার রুপোর্ট

35
আপনারা যারা পাঠ্য নির্বাচন (বা এই বিষয়ে এসও তে অন্য কিছু) অক্ষম করতে "শুধু করবেন না" বলছেন, আপনার মনকে কিছুটা খুলে দিন। প্রায়শই লোকেরা নান্দনিক কারণে যেমন এটি কোনও টেক্সটের সাথে লেবেলের ডাবল ক্লিকে পাঠ্য নির্বাচন এড়ানো ইত্যাদি অক্ষম করে, তাই হয় প্রশ্নের উত্তর দিন, বা একটি আসল পাল্টা বিন্দু সরবরাহ করুন এবং আপনি যা উপেক্ষা করছেন সে সম্পর্কে উল্লেখ করুন, ডন একটি সাধারণ পদ্ধতিতে কেবল ধারণাটি স্ক্র্যাচ করা যায় না।
dudewad

102

আপনি যদি jQuery UI ব্যবহার করেন তবে তার জন্য একটি পদ্ধতি রয়েছে তবে এটি কেবল মাউস নির্বাচন পরিচালনা করতে পারে (যেমন CTRL+ Aএখনও কাজ করছে):

$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9

কোডটি রিয়েল সহজ, আপনি যদি jQuery UI ব্যবহার করতে না চান:

$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

1
jquery ui ফাংশনটি দুর্দান্ত হবে তবে এটি একই স্তরের সুরক্ষা সরবরাহ করে না, এটি সরাসরি জিনিসগুলি নির্বাচন করা বাধা দেয় না, তবে আপনি যদি অন্য ডোম অবজেক্ট থেকে একটি নির্বাচন বহন করছেন তবে আপনার সিএসএস বিধিগুলিও দরকার - ফাংশনটি হেরস = ফাংশন () {ফেরত এই.বাইন্ড (($ .support.selecttart? "seलेक्टtart": "mousedown") + ".ui-disableSeલેક્શન", ফাংশন (ইভেন্ট) {ইভেন্ট.প্রিভেন্টডেফল্ট ();}); }
ক্রিসমার্ক

2
উল্লেখ্য যে অক্ষম নির্বাচন () jQuery UI 1.9
অবচয় করা হয়েছে

এটি আপনার ব্রাউজারের উপর নির্ভর করে কাজ করার জন্য .on ('mousedown', মিথ্যা) প্রয়োজন হতে পারে। হ্যাওওয়ার, পূর্বনির্ধারিতভাবে মোসডাউন ইভেন্টগুলিকে হত্যা করা বিপজ্জনক কারণ এটি সম্ভবত বিদ্যমান কার্যকারিতাটি ভেঙে দিতে পারে
ড্যান

1
ARG। এটি বিরক্তিকর এটি হ্রাস করা হয়েছে। আপনি বৈধভাবে এটি চান যখন প্রচুর সময় আছে।
চক লে বাট

আমি কিছু অ্যাঙ্কর পাঠ্যে একটি ডান ক্লিকের প্রসঙ্গ মেনু তৈরি করছি, এবং আমি চাই না যে ক্লিকটি টেক্সটটি নির্বাচন করা হোক। সুতরাং হ্যাঁ, @ মঙ্ক, এটি একটি বৈধ উদাহরণ হিসাবে যোগ্য হবে।
ওয়েইন স্মলম্যান

75

আমি এই উত্তরটি ( পাঠ্য সারণীর হাইলাইট প্রতিরোধ করা ) সবচেয়ে সহায়ক খুঁজে পেয়েছি এবং সম্ভবত এটি IE সামঞ্জস্যতা দেওয়ার অন্য কোনও পদ্ধতির সাথে একত্রিত হতে পারে।

#yourTable
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

ক্রোম ব্যবহার -webkit-ইউজার নির্বাচন
টিম

3
সাধারণভাবে jQuery বা জেএস ব্যবহার না করে জিনিসগুলি করার সিএসএসের উপায়টি সর্বদা প্রশংসা করুন। সিএসএস রূপান্তর বনাম jQuery অ্যানিমেশনগুলির মতো, ব্রাউজারে তৈরি উপায় সর্বদা সেরা এবং সবচেয়ে কার্যকর হতে চলেছে।
ব্রায়ান লেশম্যান

17

সংযোগ বিচ্ছিন্ন নির্বাচন এবং আরও কিছু গরম কী (যেমন Ctrl+ aএবং Ctrl+ cটেস্ট: Cmd + aএবং Cmd+ c) বাতিল করার আরও বিস্তৃত সমাধান এখানে রয়েছে's

(function($){

  $.fn.ctrlCmd = function(key) {

    var allowDefault = true;

    if (!$.isArray(key)) {
       key = [key];
    }

    return this.keydown(function(e) {
        for (var i = 0, l = key.length; i < l; i++) {
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
                allowDefault = false;
            }
        };
        return allowDefault;
    });
};


$.fn.disableSelection = function() {

    this.ctrlCmd(['a', 'c']);

    return this.attr('unselectable', 'on')
               .css({'-moz-user-select':'-moz-none',
                     '-moz-user-select':'none',
                     '-o-user-select':'none',
                     '-khtml-user-select':'none',
                     '-webkit-user-select':'none',
                     '-ms-user-select':'none',
                     'user-select':'none'})
               .bind('selectstart', false);
};

})(jQuery);

এবং কল উদাহরণ:

$(':not(input,select,textarea)').disableSelection();

jsfiddle.net/JBxnQ/

এটি ফায়ারফক্সের পুরানো সংস্করণগুলির জন্যও যথেষ্ট নয় (আমি কোনটি বলতে পারি না)। যদি এই সমস্ত কাজ না করে তবে নিম্নলিখিতগুলি যুক্ত করুন:

.on('mousedown', false)

3
attr('unselectable', 'on')দু'বার ফোন দিলে কেন ? এটি একটি টাইপো বা এটি দরকারী?
কাজম্যাগনাস

এটি আমার পক্ষে দুর্দান্ত কাজ করেছে, তবে আমাকে ".each (ফাংশন () {$ (এটি) .attr ('অপছন্দযোগ্য', 'অন') .বাইন্ড ('সিলেক্টস্টার্ট', ফাংশন () false মিথ্যা প্রত্যাবর্তন;} অক্ষম করতে হয়েছিল} );}); " আমার নির্দিষ্ট ওয়েব অ্যাপ্লিকেশন (জ্যাকিউরি মোবাইল) এর জন্য বিভাগ, কেবল যদি এটি কাউকে সহায়তা করে ..
অ্যান্টনি

13

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

$(".item")
        .attr('unselectable', 'on')
        .css({
            'user-select': 'none',
            'MozUserSelect': 'none'
        })
        .on('selectstart', false)
        .on('mousedown', false);

1
জটিল নয় - দুর্দান্ত! ধন্যবাদ. অক্ষম খুঁজছেন জন্য; আমি .attr addded ( 'প্রতিবন্ধী', 'প্রতিবন্ধী')
নিজের ইচ্ছায়

আপডেট: .attr ('অক্ষম', 'অক্ষম') এর পরিবর্তে, আমি .attr ('কেবলমাত্র পঠনযোগ্য', 'পঠনযোগ্য') ব্যবহার করেছি। অক্ষম হওয়াগুলি এমভিসিতে আমার মডেল ভেরিয়েবল পোস্ট করা বাধা দেয় (মডেল ভেরিয়েবল নাল।) কেবলমাত্র পঠনযোগ্য এখনও (আমি বুটস্ট্র্যাপ ব্যবহার করুন) খুঁজছেন নিষ্ক্রিয় করে দিয়েছি এবং এটি আইটেমটি মান পোস্ট অনুমতি দেয়
নিজের ইচ্ছায়

দুর্দান্ত ভাই, আমি এই কোডটি "পয়েন্টার-ইভেন্টস: কিছুই নয়" প্রতিস্থাপনের জন্য ব্যবহার করছি, এটি আইই ১১-তে কাজ করে না। শুভেচ্ছা
শর্টিস ওবার্তো দুতারি

8
        $(document).ready(function(){
            $("body").css("-webkit-user-select","none");
            $("body").css("-moz-user-select","none");
            $("body").css("-ms-user-select","none");
            $("body").css("-o-user-select","none");
            $("body").css("user-select","none");
        });

আপনি কোড ছাড়াও উত্তর একটি সংক্ষিপ্ত সারাংশ লিখতে পারেন?
jonsca

6

এটি সহজে জাভাস্ক্রিপ্ট ব্যবহার করে করা যেতে পারে এটি সমস্ত ব্রাউজারের জন্য প্রযোজ্য

<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE 
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
    target.style.MozUserSelect="none"
else //All other route (For Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
 </script>

এই ফাংশন কল

<script type="text/javascript">
   disableSelection(document.body)
</script>

এই এক মহান! তবে কীভাবে আমরা এতে "ফোকাস" বন্ধ করব?
মিউট্যানিক

3
এই উত্তরটি 2013 এর মধ্যে পুরানো
ড্যান

6

এটি আসলে খুব সহজ। পাঠ্য নির্বাচনটি অক্ষম করতে (এবং + টেনে আনার-পাঠ্য (উদাহরণস্বরূপ Chrome এ একটি লিঙ্ক) ক্লিক করুন), কেবলমাত্র নিম্নলিখিত jQuery কোডটি ব্যবহার করুন:

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

এইগুলি হ'ল ডিফল্টটি ঘটতে বাধা দেয় যখন আপনি ট্যাগ এবং ট্যাগগুলিতে মাউস ( mousedown()) দিয়ে ক্লিক করেন । আপনি খুব সহজেই দুটি কোট-এর মধ্যে টেক্সটটি অভ্যন্তরীণ পরিবর্তন করে খুব সহজেই উপাদানটি পরিবর্তন করতে পারেন (উদাহরণস্বরূপ পরিবর্তন করতে পরিবর্তন করুন)bodyhtml$('body, html')$('#myUnselectableDiv')myUnselectableDiv হতে DIV আছে, ভাল, unselectable।

এটি দেখানোর / প্রমাণ করার জন্য একটি দ্রুত স্নিপেট:

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>

দয়া করে মনে রাখবেন যে এই প্রভাবটি নিখুঁত নয় এবং পুরো উইন্ডোটি নির্বাচনযোগ্য না করার সময় সেরা সঞ্চালন করে। আপনি যোগ করতে চাইবেন

হট কী কিছু বাতিলের (যেমন Ctrl+aএবং Ctrl+cটেস্ট: Cmd+a এবং Cmd+c)

পাশাপাশি, উপরে ভ্লাদিমিরের উত্তরের সেই অংশটি ব্যবহার করে। ( এখানে তার পোস্ট পেতে )


1

ক্রোমের জন্য 1 লাইন সমাধান:

body.style.webkitUserSelect = "none";

এবং এফএফ:

body.style.MozUserSelect = "none";

আইইয়ের জন্য "অপছন্দযোগ্য" বৈশিষ্ট্য (নীচে বিশদ) সেট করা দরকার।

আমি এটি ক্রোমে পরীক্ষা করেছি এবং এটি কাজ করে। এই সম্পত্তিটি উত্তরাধিকার সূত্রে প্রাপ্ত তাই শরীরের উপাদান এ সেট করা আপনার পুরো দস্তাবেজের নির্বাচনকে অক্ষম করবে।

বিশদ এখানে: http://help.dottoro.com/ljrlukea.php

আপনি যদি ক্লোজার ব্যবহার করছেন, কেবল এই ফাংশনটি কল করুন:

goog.style.setUnselectable(myElement, true);

এটি সমস্ত ব্রাউজারকে স্বচ্ছভাবে পরিচালনা করে।

নন-আইই ব্রাউজারগুলি এইভাবে পরিচালনা করা হয়:

goog.style.unselectableStyle_ =
    goog.userAgent.GECKO ? 'MozUserSelect' :
    goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
    null;

এখানে সংজ্ঞায়িত: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html

আই আই অংশটি এভাবে পরিচালনা করা হয়:

if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
  for (var i = 0, descendant; descendant = descendants[i]; i++) {
    descendant.setAttribute('unselectable', value);
  }
}

1

আমি মনে করি এই কোডটি সমস্ত ব্রাউজারগুলিতে কাজ করে এবং কমপক্ষে ওভারহেডের প্রয়োজন। এটি সত্যিই উপরের সমস্ত উত্তরের একটি সংকর। আপনি যদি বাগ খুঁজে পান তবে আমাকে জানান!

সিএসএস যুক্ত করুন:

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

JQuery যুক্ত করুন:

(function($){
    $.fn.disableSelection = function() 
    {       
        $(this).addClass('no_select');              
        if($.browser.msie)
        {
            $(this).attr('unselectable', 'on').on('selectstart', false);            
        }
    return this;            
};
})(jQuery);

Alচ্ছিক: সমস্ত বাচ্চার উপাদানগুলির জন্য নির্বাচনকে অক্ষম করতে, আপনি IE ব্লকটি এতে পরিবর্তন করতে পারেন:

$(this).each(function() {
    $(this).attr('unselectable','on')
    .bind('selectstart',function(){ return false; });
});

ব্যবহার:

$('.someclasshere').disableSelection();

1

আমি সমস্ত পদ্ধতির চেষ্টা করেছি এবং এটি আমার কাছে সবচেয়ে সহজ কারণ আমি IWebBrowser2 ব্যবহার করছি এবং এর সাথে লড়াই করার জন্য 10 ব্রাউজার নেই:

document.onselectstart = new Function('return false;');

আমার জন্য পুরোপুরি কাজ করে!


0

উপযুক্ত ক্ষেত্রে এটির জন্য একটি সমাধান হ'ল আপনি <button>যে পাঠ্যটি নির্বাচনযোগ্য হতে চান না তার জন্য একটি ব্যবহার করা। আপনি যদি clickকিছু টেক্সট ব্লকের ইভেন্টের সাথে আবদ্ধ হন , এবং চান না যে পাঠ্যটি নির্বাচনযোগ্য হয়, এটিকে একটি বোতাম হিসাবে রূপান্তর করা শব্দার্থবিজ্ঞানের উন্নতি ঘটায় এবং পাঠ্যটি নির্বাচিত হওয়া প্রতিরোধ করবে।

<button>Text Here</button>

-1

আমি এটি খুঁজে পেয়েছি সেরা এবং সহজ উপায়, ctrl + c প্রতিরোধ করে, ডান ক্লিক। এই ক্ষেত্রে আমি সমস্ত কিছু অবরুদ্ধ করেছি, সুতরাং আমাকে কিছু নির্দিষ্ট করতে হবে না।

$(document).bind("contextmenu cut copy",function(e){
    e.preventDefault();
    //alert('Copying is not allowed');
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.