दिलचस्प पोस्ट
एचटीएमएल: क्या टेक्सटेरा में चित्र दिखाने का कोई तरीका है? मुझे ई-मेल पते को कैसे मान्य करना चाहिए? लाअरवेल 4 कस्टम नाम पासवर्ड कॉलम एक UIButton में AspectFit करने के लिए स्केल छवि? क्या कोई एमडी 5 फिक्स्ड प्वाइंट है जहां एमडी 5 (एक्स) == एक्स? C ++ वर्ग के सदस्यों के लिए डिफ़ॉल्ट मान क्या है वेबव्यू के एचटीएल बटन पर क्लिक करें गतिविधि में गतिविधि (जावा कोड) PHP के mysql_ फ़ंक्शंस नापसंद क्यों हैं? क्या पृष्ठभूमि में फोनगैप ऐप का काम है? जावा का उपयोग करते हुए विंडोज रजिस्ट्री को पढ़ें / लिखें विंडोज़ के अजगर 2.7 पर सुंदर सूप 4 कैसे स्थापित करें टैबब्लॉक बनाम टैबब्लॉक (ओरएल्से और ओआर) और (और भी और और) – कब उपयोग करने के लिए? Mysql_insert_id का उपयोग करने के लिए सुरक्षित है? console.log () async या सिंक?

'आंतरिक टेक्स्ट' IE में काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं

मेरे पास कुछ जावास्क्रिप्ट कोड है जो IE में काम करता है जिसमें निम्न है:

myElement.innerText = "foo"; 

हालांकि, ऐसा लगता है कि 'आंतरिक टेक्स्ट' फ़ायरफ़ॉक्स में काम नहीं करता है। क्या कुछ फ़ायरफ़ॉक्स समकक्ष है? या वहाँ एक अधिक सामान्य, क्रॉस ब्राउज़र संपत्ति है कि इस्तेमाल किया जा सकता है?

Solutions Collecting From Web of "'आंतरिक टेक्स्ट' IE में काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं"

फ़ायरफ़ॉक्स W3C- आज्ञाकारी पाठ कंटेंट संपत्ति का उपयोग करता है

मुझे लगता है कि सफारी और ओपेरा भी इस संपत्ति का समर्थन करते हैं।

अद्यतन : मैंने एक ब्लॉग पोस्ट लिखा था जिसमें सभी मतभेदों का विवरण बहुत अच्छा था।


फ़ायरफ़ॉक्स W3C मानक Node::textContent का उपयोग करता है, लेकिन उसका व्यवहार Node::textContent तुलना में थोड़ा "अलग" है (ओपेरा द्वारा कुछ समय पहले, अन्य दर्जनों एमएसएचटीएल फीचर्स के बीच भी)।

सबसे पहले, textContent प्रस्तुति अंतर textContent एक से अलग है। दूसरा, और इससे भी महत्वपूर्ण बात, textContent में सभी SCRIPT टैग सामग्री शामिल है , जबकि textContent नहीं है।

बस अधिक से अधिक मनोरंजक बनाने के लिए, ओपेरा – मानक textContent लागू करने के अलावा – ने textContent आंतरिक textContent को भी जोड़ने का फैसला किया, लेकिन इसे textContent रूप में कार्य करने के लिए बदल दिया – अर्थात् एससीआरआईपीटी सामग्री (वास्तव में ओपेरा में textContent और textContent , समान परिणामों का उत्पादन करने लगते हैं, शायद एक दूसरे के लिए aliased)।

textContent Node इंटरफ़ेस का हिस्सा है, जबकि textContent HTMLElement का हिस्सा है। उदाहरण के लिए, इसका मतलब है कि आप पाठ को "पुनः प्राप्त" कर सकते हैं, लेकिन टेक्स्ट नोड से textContent टेक्स्ट नहीं।

 var el = document.createElement('p'); var textNode = document.createTextNode('x'); el.textContent; // "" el.innerText; // "" textNode.textContent; // "x" textNode.innerText; // undefined 

अंत में, सफारी 2.x में innerText क्रियान्वयन है। सफारी में, style.display == "none" ठीक तरह से कार्य करता है यदि कोई तत्व न तो छिपा हुआ है ( style.display == "none" द्वारा। style.display == "none" ) और दस्तावेज से अनाथ नहीं है। अन्यथा, एक खाली स्ट्रिंग में innerText परिणाम।

मैं textContent एब्स्ट्रक्शन (इन कमियों के आसपास काम करने के लिए) के साथ खेल रहा था, लेकिन यह न ही जटिल हो गया

आप सबसे अच्छी शर्त है कि पहले अपनी सटीक आवश्यकताओं को परिभाषित करें और वहां से अनुसरण करें संभवतः सभी संभव textContent / textContent विचलन से निपटने के बजाय केवल एक तत्व के भीतर एचटीएमएल के टैग को पट्टी करना संभव है।

एक और संभावना, निश्चित रूप से, डोम ट्री पर चलना और टेक्स्ट नोड्स को बार-बार इकट्ठा करना है

यदि आपको केवल पाठ सामग्री सेट करने की ज़रूरत नहीं है और पुनः प्राप्त नहीं किया जाता है, तो यहां एक तुच्छ DOM संस्करण है जिसे आप किसी भी ब्राउज़र पर उपयोग कर सकते हैं; यह या तो IE अंतर्स्तृत एक्सटेंशन या DOM स्तर 3 कोर टेक्स्ट कंटेंट गुण की आवश्यकता नहीं है।

 function setTextContent(element, text) { while (element.firstChild!==null) element.removeChild(element.firstChild); // remove all existing content element.appendChild(document.createTextNode(text)); } 

jQuery एक .text() विधि प्रदान करता है जिसे किसी भी ब्राउज़र में उपयोग किया जा सकता है। उदाहरण के लिए:

 $('#myElement').text("Foo"); 

प्रकाश के जवाबों के अनुसार फ़ायरफ़ॉक्स इनस्ट्रीम टेक्स्ट प्रॉपर्टी का समर्थन नहीं करता है। तो आप केवल यह जांच कर सकते हैं कि उपयोगकर्ता एजेंट इस संपत्ति का समर्थन करता है और इसके अनुसार तदनुसार आगे बढ़ता है:

 function changeText(elem, changeVal) { if (typeof elem.textContent !== "undefined") { elem.textContent = changeVal; } else { elem.innerText = changeVal; } } 

जावास्क्रिप्ट की एक बहुत सरल पंक्ति सभी मुख्य ब्राउज़रों में "गैर-टैगी" पाठ प्राप्त कर सकती है …

 var myElement = document.getElementById('anyElementId'); var myText = (myElement.innerText || myElement.textContent); 

ध्यान दें कि Element::innerText प्रॉपर्टी में टेक्स्ट नहीं होगा जिसमें Google क्रोम में सीएसएस स्टाइल " display:none " छिपा हुआ है (साथ ही यह उस सामग्री को छोड़ देगा जिसे अन्य सीएसएस टेकनीक (फ़ॉन्ट-आकार सहित) 0, रंग: पारदर्शी, और पाठ के कारण कुछ अन्य इसी तरह के प्रभाव किसी भी दृश्यमान तरीके से प्रदान किए जाने के लिए नहीं)।

अन्य सीएसएस गुणों को भी माना जाता है:

  • सबसे पहले "डिस्प्ले:" यह निर्धारित करने के लिए आंतरिक तत्वों की शैली को पार्स किया जाता है कि क्या यह एक ब्लॉक सामग्री (जैसे "डिस्प्ले: ब्लॉक") को ब्राउज़र के अंतर्निर्मित स्टाइलशीट में एचटीएमएल ब्लॉक तत्वों का डिफ़ॉल्ट है, और जिसका व्यवहार ओवरराइड नहीं किया गया है अपनी सीएसएस शैली); यदि ऐसा है तो एक नई लाइन भीतर टेक्स्ट संपत्ति के मूल्य में डाली जाएगी यह टेक्स्ट कंटेंट संपत्ति के साथ नहीं होगा
  • इनलाइन सामग्री उत्पन्न करने वाली सीएसएस संपत्तियों को भी माना जाएगा: उदाहरण के लिए इनलाइन तत्व <br \> जो एक इनलाइन न्यूलाइन उत्पन्न करता है, <br \> के मूल्य में एक नई <br \> उत्पन्न करेगा।
  • "डिस्प्ले: इनलाइन" स्टाइल का कारण बनता है कोई नया लाइन या तो टेक्स्ट कंटेंट या इनर टेक्स्ट में।
  • "प्रदर्शन: तालिका" शैली तालिका के चारों ओर और तालिका पंक्तियों के बीच नई लाइनें उत्पन्न करती है, लेकिन "प्रदर्शन: तालिका-सेल" एक सारणी वर्ण उत्पन्न करेगा
  • "स्थिति: निरपेक्ष" संपत्ति (प्रदर्शन के साथ: ब्लॉक या प्रदर्शन: इनलाइन, यह कोई फर्क नहीं पड़ता) भी एक लाइन ब्रेक डालने के लिए कारण होगा।
  • कुछ ब्राउज़रों में स्पैन के बीच एक एकल स्थान अलग भी शामिल होगा

लेकिन Element::textContent में अभी भी आंतरिक पाठ तत्वों की सभी सामग्री शामिल हैं, जो कि स्वतंत्र रूप से लागू सीएसएस के भले ही वे अदृश्य हो। और टेक्स्ट कॉन्टेंट में कोई अतिरिक्त न्यूलाइन या व्हाइटस्पेस नहीं बनाया जाएगा, जो सभी शैलियों और संरचना और इनलाइन / ब्लॉक या आंतरिक तत्वों की स्थितियों को अनदेखा करता है।

माउस चयन का उपयोग करते हुए एक कॉपी / पेस्ट ऑपरेशन क्लिपबोर्ड में रखे गए सादे-पाठ प्रारूप में छिपे हुए पाठ को त्याग देगा, इसलिए इसमें textContent में सब कुछ शामिल नहीं होगा, लेकिन केवल भीतर का textContent क्या है ( textContent / न्यूलाइन पीढ़ी के बाद ऊपर)।

फिर दोनों गुण Google क्रोम में समर्थित हैं, लेकिन उनकी सामग्री तब भिन्न हो सकती है अब पुराने ब्राउज़रों में अब भी शामिल हैं, जो कुछ पाठ सामग्री अब शामिल है (लेकिन फिर से व्हाइटस्पेस / नई लाइनों की पीढ़ी के संबंध में उनका व्यवहार असंगत था)।

jQuery द्वारा ".text ()" विधि का उपयोग करके ब्राउज़र के बीच इन विसंगतियों को हल किया जाता है जो विश्लेषित तत्वों को जोड़ता है जो कि $ () क्वेरी के द्वारा देता है आंतरिक रूप से, यह एचटीएमएल डोम को देखकर कठिनाइयों को हल करता है, केवल "नोड" स्तर के साथ काम कर रहा है। इसलिए यह मानक पाठ कंटेंट की तरह कुछ और देखेगा।

चेतावनी यह है कि यह jQuery विधि किसी भी अतिरिक्त स्थान या लाइन ब्रेक को सम्मिलित नहीं करेगी जो सामग्री के उप-समूह (जैसे <br /> ) की वजह से स्क्रीन पर दिखाई दे सकती है

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

सीएसएस ट्रिक्स द्वारा छिपी ग्रंथ अब आम तौर पर प्रमुख खोज इंजन (जो आपके एचटीएमएल पृष्ठों के सीएसएस को भी पार्स करेगा, और पृष्ठभूमि पर रंगों को विपरीत नहीं कर रहे ग्रंथों को भी अनदेखा करेगा) द्वारा अनदेखा कर दिया जाता है, एक HTML / CSS पार्सर और DOM प्रॉपर्टी "इनर टेक्स्ट" आधुनिक विज़ुअल ब्राउज़र की तरह बिल्कुल ठीक (कम से कम इस अदृश्य सामग्री को अनुक्रमित नहीं किया जाएगा ताकि छिपे हुए पाठ का इस्तेमाल सामग्री की जांच के लिए पृष्ठ में कुछ खोजशब्दों को शामिल करने के लिए मजबूर करने के लिए नहीं किया जा सकता); लेकिन इस छिपे हुए पाठ को परिणाम पृष्ठ में प्रदर्शित किया जाएगा (यदि पृष्ठ अभी भी परिणाम में शामिल होने के लिए सूचकांक से योग्य था), तो अतिरिक्त शैली और स्क्रिप्ट स्ट्रिप करने के लिए पूर्ण HTML के बजाय "टेक्स्ट कंटेंट" प्रॉपर्टी का उपयोग कर।

यदि आप इन दो गुणों में से किसी एक में कुछ सादा पाठ निर्दिष्ट करते हैं, तो यह उस पर लागू होने वाले आंतरिक मार्कअप और शैलियों को अधिलेखित कर देगा (केवल असाइन किया गया तत्व उसके प्रकार, विशेषताओं और शैलियों को रखेगा), इसलिए दोनों गुणों में एक ही सामग्री । हालांकि, कुछ ब्राउज़रों अब इन टेक्स्ट को लिखने का सम्मान नहीं करेंगे, और केवल आपको टेक्स्ट कंटेंट प्रॉपर्टी को अधिलेखित करने देगा (आप इन गुणों को लिखते समय एचटीएमएल मार्कअप सम्मिलित नहीं कर सकते हैं, क्योंकि एचटीएमएल विशेष अक्षरों का अक्षरशः प्रकट होने के लिए संख्यात्मक वर्ण संदर्भों का उपयोग करके एन्कोड किया जाएगा। , यदि आप textContent या textContent के असाइनमेंट के बाद textContent

 myElement.innerText = myElement.textContent = "foo"; 

संपादित करें (नीचे टिप्पणी के लिए मार्क एम्री के लिए धन्यवाद): यदि आप एक उचित संदेह से परे जानते हैं कि यह कोड इन गुणों के अस्तित्व की जाँच करने पर भरोसा कर रहा है, तो ऐसा ही करें (उदाहरण के लिए) jQuery करता है लेकिन अगर आप jQuery का प्रयोग कर रहे हैं, तो आप शायद "टेक्स्ट" फ़ंक्शन का उपयोग करेंगे और $ ('# myElement') कर सकते हैं। पाठ ('फू') जैसा कि कुछ अन्य जवाब दिखाते हैं

इनरटेस्ट फ़ायरफ़ॉक्स में जोड़ा गया है और एफएफ 45 रिलीज में उपलब्ध होना चाहिए: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

एक मसौदा तैयार किया गया है और भविष्य में HTML जीवित मानक में शामिल होने की उम्मीद है: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

ध्यान दें कि वर्तमान में फ़ायरफ़ॉक्स, क्रोम और आईई लागूकरण सभी असंगत हैं। आगे जा रहा है, हम संभवत: फायरफॉक्स, क्रोम और एज का आकलन करने की उम्मीद कर सकते हैं, जबकि पुरानी आईई असंगत रहती है।

यह भी देखें: https://github.com/whatwg/compat/issues/5

इस तरह के किसी चीज़ के बारे में क्या?

 //$elem is the jQuery object passed along. var $currentText = $elem.context.firstChild.data.toUpperCase(); 

** मुझे अपना अपरकेस बनाने की आवश्यकता थी

यह textContent , textContent , textContent , और वैल्यू के साथ मेरा अनुभव रहा है:

 // elem.innerText = changeVal; // works on ie but not on ff or ch // elem.setAttribute("innerText", changeVal); // works on ie but not ff or ch // elem.textContent = changeVal; // works on ie but not ff or ch // elem.setAttribute("textContent", changeVal); // does not work on ie ff or ch // elem.innerHTML = changeVal; // ie causes error - doesn't work in ff or ch // elem.setAttribute("innerHTML", changeVal); //ie causes error doesn't work in ff or ch elem.value = changeVal; // works in ie and ff -- see note 2 on ch // elem.setAttribute("value", changeVal); // ie works; see note 1 on ff and note 2 on ch 

यानी = इंटरनेट एक्सप्लोरर, एफएफ = फ़ायरफ़ॉक्स, च = गूगल क्रोम नोट 1: एफएफ काम करता है जब तक कि बैकलस्पेस के साथ मूल्य को हटाया नहीं जाता है – ऊपर रे वेगा द्वारा नोट देखें। नोट 2: क्रोम में कुछ हद तक काम करता है – अपडेट के बाद यह अपरिवर्तित है, तो आप दूर क्लिक करते हैं और फ़ील्ड में वापस क्लिक करते हैं और मान दिखाई देता है। बहुत अच्छा है elem.value = changeVal ; जो मैंने ऊपर टिप्पणी नहीं की थी

बस मूल पोस्ट के तहत टिप्पणियों से reposting सभी ब्राउज़र में आंतरिक एचटीएमएल काम करता है धन्यवाद स्टेफ़िता

myElement.innerHTML = "foo";

फ़ायरफ़ॉक्स v45 से 2016 में, फ़ायरफ़ॉक्स पर आंतरिक टेक्स्ट काम करता है, इसके समर्थन पर एक नज़र डालें: http://caniuse.com/#search=innerText

अगर आप इसे फ़ायरफ़ॉक्स के पिछले संस्करणों पर काम करना चाहते हैं, तो आप textContent उपयोग कर सकते हैं, जो फ़ायरफ़ॉक्स पर बेहतर समर्थन प्रदान करते हैं, लेकिन पुराने आईई वर्जनों पर बुरा है : http://caniuse.com/#search=textContent

यह यहां पाया:

 <!--[if lte IE 8]> <script type="text/javascript"> if (Object.defineProperty && Object.getOwnPropertyDescriptor && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) (function() { var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); Object.defineProperty(Element.prototype, "textContent", { // It won't work if you just drop in innerText.get // and innerText.set or the whole descriptor. get : function() { return innerText.get.call(this) }, set : function(x) { return innerText.set.call(this, x) } } ); })(); </script> <![endif]--> 

अन्य ब्राउज़रों में innerText व्यवहार का अनुकरण करना संभव है:

  if (((typeof window.HTMLElement) !== "undefined") && ((typeof HTMLElement.prototype.__defineGetter__) !== "undefined")) { HTMLElement.prototype.__defineGetter__("innerText", function () { if (this.textContent) { return this.textContent; } else { var r = this.ownerDocument.createRange(); r.selectNodeContents(this); return r.toString(); } }); HTMLElement.prototype.__defineSetter__("innerText", function (str) { if (this.textContent) { this.textContent = str; } else { this.innerHTML = str.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/\n/g, "<br />\n"); } }); }