प्रोग्राम को एक संतुष्ट HTML तत्व में पाठ का चयन करें?

Question

जावास्क्रिप्ट में, किसी प्रोग्राम inputया textareaतत्व में प्रोग्राम का चयन करना संभव है । आप के साथ एक इनपुट पर ध्यान केंद्रित कर सकते हैं ipt.focus(), और फिर इसके साथ इसकी सामग्री का चयन कर सकते हैं ipt.select()। आप किसी विशिष्ट श्रेणी का भी चयन कर सकते हैं ipt.setSelectionRange(from,to)।

मेरा सवाल यह है: क्या किसी contenteditableतत्व में ऐसा करने का कोई तरीका है?

मैंने पाया कि मैं elem.focus()एक contenteditableतत्व में कैरेट डाल सकता हूं , लेकिन बाद में चलने से elem.select()काम नहीं होता (और न ही setSelectionRange)। मुझे इसके बारे में वेब पर कुछ भी नहीं मिल रहा है, लेकिन शायद मैं गलत चीज़ खोज रहा हूँ ...

वैसे, अगर इससे कोई फर्क पड़ता है, तो मुझे केवल Google Chrome में काम करने की आवश्यकता है, क्योंकि यह क्रोम एक्सटेंशन के लिए है।

Answer 1

यदि आप Chrome में किसी तत्व की सभी सामग्री (सामग्री या नहीं) का चयन करना चाहते हैं, तो यहां बताया गया है कि कैसे। यह फ़ायरफ़ॉक्स, सफारी 3+, ओपेरा 9+ (संभवतः पहले के संस्करण भी) और IE 9. में भी काम करेगा। आप चरित्र स्तर तक चयन भी बना सकते हैं। जिन API की आपको आवश्यकता होती है, वे DOM Range (करंट स्पेक DOM लेवल 2 है , MDN भी देखें ) और सेलेक्शन, जिन्हें एक नए रेंज स्पेक ( MDN डॉक्स ) के हिस्से के रूप में निर्दिष्ट किया जा रहा है ।

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

var el = document.getElementById("foo");
selectElementContents(el);

Comments

अतिरिक्त कंपैटिबिलिटी के लिए आपको कॉल करना चाहिए या यदि selectElementContents()ए से कॉल किया जाए । देखें jsfiddle.net/rudiedirkx/MgASG/1/showsetTimeout()requestAnimationFrame()onfocus

— Rudie

@ डायलन: मुझे यकीन नहीं है: सवाल का उल्लेख है कि ओपी पहले से ही उपयोग कर रहा है focus()।

— टिम डाउन

@Rudie किस अनुप्रयोग के लिए संगतता ?

— यकर्र्ट

डेस्कटॉप पर बढ़िया काम करता है। मोबाइल ब्राउज़र पर, काम नहीं करता है। कोई चयन नहीं हुआ। IPhone iOS 11 पर सफारी और क्रोम की कोशिश की

— कैम्पबेल

@campbell: यह कम से कम iOS पर सफारी पर काम करता है, बशर्ते आपके पास पहले से ही एक चयन हो । अन्यथा नहीं, ब्राउज़र केवल उपयोगकर्ता अनुभव कारणों के लिए जावास्क्रिप्ट को चयन करने की अनुमति नहीं देता है।

— टिम डाउन

Answer 2

टिम डाउन्स जवाब के अलावा , मैंने एक समाधान बनाया जो पुराने में भी काम करता है:

var selectText = function() {
  var range, selection;
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(this);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }
};

document.getElementById('foo').ondblclick = selectText;​

IE 8+, फ़ायरफ़ॉक्स 3+, ओपेरा 9+, और क्रोम 2+ में परीक्षण किया गया। यहां तक ​​कि मैंने इसे jQuery प्लगइन में सेट किया है:

jQuery.fn.selectText = function() {
  var range, selection;
  return this.each(function() {
    if (document.body.createTextRange) {
      range = document.body.createTextRange();
      range.moveToElementText(this);
      range.select();
    } else if (window.getSelection) {
      selection = window.getSelection();
      range = document.createRange();
      range.selectNodeContents(this);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  });
};

$('#foo').on('dblclick', function() {
  $(this).selectText();
});

... और जो सभी में शामिल है, यहां सभी कॉफी-नशेड़ियों के लिए समान है:

jQuery.fn.selectText = ->
  @each ->
    if document.body.createTextRange
      range = document.body.createTextRange()
      range.moveToElementText @
      range.select()
    else if window.getSelection
      selection = window.getSelection()
      range = document.createRange()
      range.selectNodeContents @
      selection.removeAllRanges()
      selection.addRange range
    return

अपडेट करें:

यदि आप किसी संपादन योग्य क्षेत्र के पूरे पृष्ठ या सामग्री (झंडे के साथ contentEditable) का चयन करना चाहते हैं , तो आप इसे स्विच designModeऔर उपयोग करके बहुत सरल कर सकते हैं document.execCommand:

एमडीएन और एक लिटलडिन्जिलेशन पर एक अच्छा शुरुआती बिंदु है ।

var selectText = function () {
  document.execCommand('selectAll', false, null);
};

(IE6 +, ओपेरा 9+, फायरफॉय 3+, क्रोम 2+) http://caniuse.com/#search=execCommand में अच्छा काम करता है

Answer 3

चूंकि सभी मौजूदा उत्तर divतत्वों से निपटते हैं, इसलिए मैं समझाता हूं कि इसे कैसे करना है span।

किसी पाठ श्रेणी का चयन करते समय सूक्ष्म अंतर होता है span। पाठ शुरू और अंत सूचकांक को पारित करने में सक्षम होने के लिए, आपको एक Textनोड का उपयोग करना होगा , जैसा कि यहां वर्णित है :

यदि startNode एक प्रकार का पाठ, टिप्पणी या CDATASection का नोड है, तो startOffset प्रारंभनाम की शुरुआत से वर्णों की संख्या है। अन्य नोड प्रकारों के लिए, स्टार्टऑनसेट प्रारंभ के प्रारंभ के बीच चाइल्ड नोड्स की संख्या है।

var e = document.getElementById("id of the span element you want to select text in");
var textNode = e.childNodes[0]; //text node is the first child node of a span

var r = document.createRange();
var startIndex = 0;
var endIndex = textNode.textContent.length;
r.setStart(textNode, startIndex);
r.setEnd(textNode, endIndex);

var s = window.getSelection();
s.removeAllRanges();
s.addRange(r);

Comments

वास्तव में होना चाहिए: r.setStart(e.firstChild,0); r.setEnd(e.lastChild,e.lastChild.textContent.length); निश्चित रूप से आपको जांचना चाहिए कि ई.फर्स्टचाइल्ड वास्तव में अशक्त नहीं है।

— योरिक

एक <div>और एक <span>तत्व में चयन करने के बीच कोई अंतर नहीं है । कम से कम, जैसा कि आप वर्णन नहीं करते हैं।

— टिम डाउन

डिव और स्पैन के बीच अंतर हैं, कुछ मामलों में डिव का एक समाधान स्पैन में सही काम नहीं करता है। उदाहरण के लिए यदि आप डिव सॉल्यूशन के साथ प्रोग्राम प्रोग्राम का चयन करते हैं तो नई सामग्री को पेस्ट करें, यह पूरे टेक्स्ट को नहीं बदलेगा, केवल एक हिस्सा है और क्रोम और फायरफॉक्स के बीच अंतर हैं

— neosonne

Answer 4

रंगी आपको एक ही कोड के साथ इस क्रॉस-ब्राउज़र को करने की अनुमति देता है। रंगी चयनों के लिए DOM तरीकों का एक क्रॉस-ब्राउज़र कार्यान्वयन है। यह अच्छी तरह से परीक्षण किया जाता है और यह बहुत कम दर्दनाक बनाता है। मैं इसके बिना संतोषपूर्ण स्पर्श करने से इनकार करता हूं।

आप यहाँ रंग मिल सकते हैं:

http://code.google.com/p/rangy/

अपनी परियोजना में रंगी के साथ, आप इसे हमेशा लिख ​​सकते हैं, भले ही ब्राउज़र IE 8 या पहले का हो और चयन के लिए पूरी तरह से अलग देशी एपीआई हो:

var range = rangy.createRange();
range.selectNodeContents(contentEditableNode);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);

जहाँ "contentEditableNode" DOM ​​नोड है जिसमें सामग्रीगत गुण है। आप इसे इस तरह ला सकते हैं:

var contentEditable = document.getElementById('my-editable-thing');

या अगर jQuery पहले से ही आपके प्रोजेक्ट का हिस्सा है और आपको यह सुविधाजनक लगे:

var contentEditable = $('.some-selector')[0];

Comments

— रंगी

Answer 5

चीजों को करने का आधुनिक तरीका ऐसा है। MDN पर अधिक जानकारी

document.addEventListener('dblclick', (event) => {
  window.getSelection().selectAllChildren(event.target)
})

<div contenteditable="true">Some text</div>

Comments

धन्यवाद, यह महान काम करता है! Fwiw, कि एमडीएन पृष्ठ इस तकनीक को प्रयोगात्मक के रूप में चिह्नित करता है। लेकिन यह जून 2020 में क्रोम और एफएफ के वर्तमान संस्करण में काम करता है।

— जॉनके

Answer 6

[गलती को ठीक करने के लिए अपडेट किया गया]

यहाँ एक उदाहरण दिया गया है जो इस उत्तर से अनुकूलित है जो क्रोम में अच्छा काम करता है - div में श्रेणी का चयन करें

var elm = document.getElementById("myText"),
    fc = elm.firstChild,
    ec = elm.lastChild,
    range = document.createRange(),
    sel;
elm.focus();
range.setStart(fc,1);
range.setEnd(ec,3);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

HTML है:

<div id="myText" contenteditable>test</div>