जावास्क्रिप्ट के साथ स्पष्ट पाठ चयन

Question

सरल प्रश्न जो मुझे इसका उत्तर नहीं मिल रहा है: मैं किसी भी पाठ को रद्द करने के लिए जावास्क्रिप्ट (या jQuery) का उपयोग कैसे कर सकता हूं जिसे वेबपृष्ठ पर चुना जा सकता है? ईजी उपयोगकर्ता क्लिक करता है और पाठ के एक हिस्से को उजागर करने के लिए ड्रग करता है - मैं एक फ़ंक्शन deselectAll () चाहता हूं जो इस चयन को साफ करता है। इसे लिखने के बारे में मुझे कैसे जाना चाहिए?

सहायता के लिए धन्यवाद।

Answer 1

if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

श्री वाई को श्रेय।

Comments

यह मानता है कि document.selectionइसका मतलब यह है कि इसका एक empty()तरीका है। आपने हर दूसरे मामले में विधि के लिए परीक्षण किया है, इसलिए आप emptyअंतिम मामले में भी परीक्षण कर सकते हैं।

— टिम डाउन

मेरे jquery.tableCheckbox.js प्लगइन के भीतर इसका इस्तेमाल किया , धन्यवाद।

— मार्को केरविट्ज़

मैंने आपके सुझाव के आधार पर एक पूर्ण काम करने का उदाहरण बनाया है, लेकिन कुछ अतिरिक्त jsfiddle.net/mkrivan/hohx4nes जोड़कर सबसे महत्वपूर्ण पंक्ति है window.getSelection ()। addRange (document.createRange ()); इसके बिना IE कुछ स्थितियों में पाठ को अचयनित नहीं करता है। और मैंने विधि का पता लगाने का क्रम बदल दिया है।

— मिकलोस क्रिवन

तुम मेरे दिन को बचा लो मेरे दोस्त! मैं स्क्रैडपैड का उपयोग कर रहा था और जब पूरे पेज को स्क्रैच किया गया था और इस अच्छी स्क्रिप्ट के साथ मैंने स्क्रैडपैड प्लगइन का उपयोग करने से पहले अपने पेज को अचयनित किया। मूल रूप से यह काम करता है! आपका बहुत बहुत धन्यवाद!

— मिलाएं

मैं फव्वारा कि window.getSelection().removeAllRanges();IE (बढ़त) और सफारी में ठीक काम करता है।

— चाइल

Answer 2

अपनी इच्छित विशेषताओं का सीधे परीक्षण करने के लिए सर्वश्रेष्ठ:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}

Answer 3

2014 के डी-चयन मामलों के राज्य

मैंने खुद का कुछ शोध किया। यहां मैंने जो फ़ंक्शन लिखा है और इन दिनों का उपयोग कर रहा हूं:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

मूल रूप से, getSelection().removeAllRanges()वर्तमान में सभी आधुनिक ब्राउज़रों (IE9 + सहित) द्वारा समर्थित है। यह स्पष्ट रूप से आगे बढ़ने की सही विधि है।

संगतता मुद्दों के लिए जिम्मेदार:

• क्रोम और सफारी के पुराने संस्करणों का इस्तेमाल किया getSelection().empty()
• IE8 और नीचे इस्तेमाल किया document.selection.empty()

अपडेट करें

संभवतः पुन: उपयोग के लिए इस चयन कार्यक्षमता को लपेटना एक अच्छा विचार है।

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

मैंने इसे एक सामुदायिक विकी बना दिया है ताकि आप लोग इसमें कार्यक्षमता जोड़ सकें, या मानकों के विकसित होने पर चीजों को अपडेट कर सकें।

Comments

मेरे जवाब के साथ भी ऐसा ही हो रहा है। 4 साल में कुछ नहीं बदला है।

— टिम डाउन

भयानक। न केवल आपने सचमुच दूसरे पोस्टर से कार्यान्वयन को चुराया था, बल्कि आपने इसे पूरी तरह से वाक्यात्मक रूप से ट्रैश किया।

— kamelkev

Answer 4

यहाँ स्वीकृत उत्तर है, लेकिन कोड की दो पंक्तियों में:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

केवल जाँच मैं ऐसा नहीं करते हैं removeAllRanges के अस्तित्व के लिए है - लेकिन AFAIK कोई ब्राउज़र है कि या तो नहीं है window.getSelectionया document.selectionलेकिन नहीं करता है या तो एक .emptyया .removeAllRangesउस संपत्ति के लिए।

Answer 5

window.getSelection () आपको चयनित पाठ का उपयोग करने देता है, वहां से, कुछ चीजें हैं जो आप इसे हेरफेर करने के लिए कर सकते हैं ..

और पढ़ें: डेवलपर मोज़िला डोम चयन

Answer 6

राइट क्लिक और टेक्स्ट सिलेक्शन को रोकने के लिए इसे अपनी स्क्रिप्ट में जोड़ें।

अपवादों को var 'om' में जोड़ा जा सकता है।

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}