जावास्क्रिप्ट: पाठ का चयन अक्षम करें

Question

मैं अपने वेबिस्ट पर पाठ चयन को अक्षम करने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूं।

कोड है:

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

ऐसी ही स्क्रिप्ट यहां मिल सकती है

मेरे लोकलहोस्ट पर: सभी ब्राउजर (फ़ायरफ़ॉक्स, क्रोम, IE और सफारी) बढ़िया काम करते हैं।

मेरी लाइव साइट पर: सभी ठीक अपवाद फ़ायरफ़ॉक्स।

मेरे प्रश्न हैं:

1. क्या किसी के पास सुझाव है कि फ़ायरफ़ॉक्स लाइव साइट और स्थानीय होस्ट के लिए अलग-अलग व्यवहार क्यों करता है। नोट: जावास्क्रिप्ट सक्षम है।

2. हो सकता है कि मेरी स्क्रिप्ट बहुत सरल है इसलिए मैंने निम्नलिखित समान परिणाम के साथ प्रयास किया है

Comments

मुझे इस मामले के लिए जावास्क्रिप्ट के उपयोग से बचने के लिए सुझाव दें। बस सीएसएस का उपयोग करें, आप इस सवाल पर

— RienNeVaPlu's

दूसरी लिपि की संभावना बहुत पुरानी है।

— Document.all को

मुझे ऐसा करने वाली साइटों से नफरत है। अगर मैं कुछ पाठ कॉपी करना चाहता हूं तो मैं देव उपकरण खोल सकता हूं और इसे वैसे भी कॉपी कर सकता हूं। यह सिर्फ एक अनावश्यक असुविधा है।

— uylmz

बिल्कुल वैसा ही जैसा रीक कहता है। जब तक आप इसके लिए एक बहुत अच्छा कारण नहीं है ऐसा मत करो। बहुत से लोग इसे खोजने के लिए कुछ का चयन करना चाहते हैं या किसी शब्द को देखने के लिए शब्दकोश का उपयोग कर सकते हैं। इसे रोकना सिर्फ एक झुंझलाहट है जो लंबे समय में लोगों को आपकी साइट से दूर कर सकती है।

— Czechnology

सबसे पहले, मैं उन पृष्ठों से भी नफरत करता हूं, जो केवल इसके "मज़े" के लिए (पाठ और व्हाट्सएप) का चयन करने से मना करते हैं, लेकिन मुझे लगता है कि यह एक अच्छा सवाल है, क्योंकि किसी को इसे अक्षम करने के लिए कुछ वैध कारण हैं ( जैसे , माउस इशारों को लागू करने के लिए। या जो भी हो खेल के पाठ के ब्लॉक को खींचें और छोड़ें)। बेशक, उस अंत को प्राप्त करने के लिए जेएस का उपयोग करना बुरा है, लेकिन सीएसएस समाधान में भी इसकी समस्याएं हैं (कुछ ब्राउज़रों में, user-selectअकेले काम नहीं करेगा, इसे काम करने के लिए "-vendor-" उपसर्ग, पसंद -moz-user-selectऔर -webkit-user-selectइसलिए, की आवश्यकता होती है " , यह सभी संभव बदलाव सेट करने के लिए आवश्यक है none)।

— साइबरनिटी

Answer 1

बस इस सीएसएस विधि का उपयोग करें:

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

आप यहां एक ही उत्तर पा सकते हैं: सीएसएस का उपयोग करके हाइलाइट किए गए टेक्स्ट चयन को कैसे अक्षम करें?

Comments

उस लिंक को भी जोड़ें जहां से आपको यह उत्तर मिला है: stackoverflow.com/questions/826782/…

— Ron van der Heijden

आपका बहुत बहुत धन्यवाद। आईई को छोड़कर सभी मामलों में सीएसएस ने काम किया। क्या आईई के लिए भी इस समस्या को हल करने के लिए सीएसएस समाधान है? मैं अब सभी ब्राउज़रों को कवर करने के लिए Js और CSS के संयोजन का उपयोग कर रहा हूँ !! थेक यू

— अर्पेगियो

1. इस asnwer को समाधान के रूप में क्यों नहीं टैग किया गया है? ... यह सबसे सटीक और सरल तरीके से प्रश्न में समस्या को हल करता है। 2. यह उल्लेख किया जाना चाहिए कि यह सीएसएस बचाव किसी भी HTML तत्व पर लागू किया जा सकता है और केवल बॉडी ही नहीं।

— theCuBeMan

@ TheCuBeMan "उपयोगकर्ता-चयन" एक गैर मानक विशेषता है, और IMO, इसलिए सबसे अच्छा समाधान नहीं है।

— ndugger

यह शायद सबसे अच्छा तरीका है - ब्राउज़र इसे अलग तरीके से संभालते हैं क्योंकि यह जटिल है और वे सभी अलग-अलग लेते हैं। अर्थात्, वे अभी भी यूएक्स (कोई चयन नहीं) प्रदान करना चाहते हैं, जबकि उपयोगकर्ता को यह चुनने की अनुमति देता है कि क्या वे वास्तव में चाहते हैं । W3C के मसौदे में अधिक नोट हैं, और कैनीयूज़ शानदार समर्थन दिखाता है। यह ठीक है कि ब्राउज़र इसे अलग तरह से संभालते हैं - उपयोगकर्ता को वह अनुभव मिलेगा जो उनके पसंदीदा ब्राउज़र प्रदान करता है।

— शॉन एर्खर्ट

Answer 2

मैं ड्रैस फीचर प्रदान करने के लिए स्लाइडर यूआई कंट्रोल लिख रहा हूं, यह मेरा तरीका है कि जब यूजर ड्रैग कर रहा हो तो कंटेंट को चुनने से रोकें:

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

startDragअपने डोम पर बांधें :

<button onmousedown="startDrag">...</button>

यदि आप टेक्स्ट को सभी एलिमेंट पर सेलेक्ट करना चाहते हैं, तो एलिमेंट्स लोड होने पर कोड निष्पादित करें:

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

      

Comments

यह सबसे अच्छा समाधान है, क्योंकि CSS समाधान contenteditableविशेषता के साथ divs के लिए काम नहीं करता है (जैसे कि यदि आप पाठ चयन को अक्षम करना चाहते हैं जबकि नियंत्रण उपयोगकर्ता के माउस द्वारा आकार बदला जा रहा है)।

— mbomb007

Answer 3

जावास्क्रिप्ट के लिए इस समारोह का उपयोग करें:

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

चयन को सक्षम करने के लिए इसका उपयोग करें:

function reEnable() {return true}

और इस समारोह का उपयोग कहीं भी आप चाहते हैं:

document.onclick = reEnable

Comments

सिवाय new Function (return false)एक मान्य जावास्क्रिप्ट कोड के नहीं है। बस उपयोग करें document.onselectstart = disableselect।

— Amik

@amik इस बारे में कैसे: document.oncontextmenu = new Function("return false;");या यह CSS का उपयोग करते हुए:<body onselectstart="return false">

— हसन आज़िमी

हां new Function("return false;")काम करेगा, लेकिन अनावश्यक रूप से केवल disableselectआपके पास उपयोग करने की तुलना में जटिल है। onselectstart="return false"भी काम करेगा, लेकिन सीएसएस के साथ कुछ नहीं करना है। इसके अलावा, मैंने देखा है कि आपके उत्तर के बाकी भी गलत है - reEnableफ़ंक्शन बिल्कुल काम नहीं करेगा।

— Amik

@amik haha ​​अच्छी तरह से कुछ भी जावास्क्रिप्ट में आवश्यक नहीं है, लेकिन हम अभी भी करते हैं। निश्चित रूप से, कोड को फिर से बनाया जा सकता है लेकिन सवाल पर एक नज़र डालें, जवाब, सवाल का जवाब होमवर्क करने की कोशिश नहीं कर रहा है।

— हसन आज़मी

ठीक है, लेकिन एसओ शिक्षा के लिए एक जगह है, इसलिए मैं एक ऐसा उत्तर प्रदान करने पर विचार करता हूं जो तकनीकी रूप से गलत हो और जो एक अच्छा विचार नहीं है।

— आमिक

Answer 4

यदि आपको इस तरह एक html पृष्ठ मिला है:

    <body
    onbeforecopy = "झूठे लौटें"
    ondragstart = "झूठे लौटें" 
    onselectstart = "झूठे लौटें" 
    oncontextmenu = "झूठे लौटें" 
    onselect = "document.selection.empty ()" 
    oncopy = "document.selection.empty ()">

सभी घटनाओं को अक्षम करने का एक सरल तरीका है:

document.write(document.body.innerHTML)

आपको html सामग्री मिली और अन्य चीजें खो गईं।

Answer 5

सभी ब्राउज़र में ठीक काम करता है, जावास्क्रिप्ट की आवश्यकता होती है:

onselectstart = (e) => {e.preventDefault()}

उदाहरण:

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }

Select me!

---

एक अन्य js विकल्प, सीएसएस समर्थन का परीक्षण करते हुए, और अक्षम userSelect, या MozUserSelectFirefox के लिए।

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"

Select me!

---

शुद्ध सीएसएस, एक ही तर्क। चेतावनी आपको उन नियमों को हर ब्राउज़र तक विस्तारित करना होगा, यह क्रिया हो सकती है।

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}

<div>Select me!</div>

Answer 6

सरल इस पाठ की प्रतिलिपि बनाएँ और पहले पर रख दें </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}