'innerText' IE'de çalışır, ancak Firefox'ta çalışmaz

Aşağıdakileri içeren IE çalışan bazı JavaScript kodu var:

myElement.innerText = "foo";

Ancak, 'innerText' özelliği Firefox'ta çalışmıyor gibi görünüyor. Bazı Firefox eşdeğeri var mı? Yoksa kullanılabilecek daha genel, çapraz tarayıcı özelliği var mı?

Firefox, W3C uyumlu textContent özelliğini kullanır .

Safari ve Opera'nın da bu özelliği desteklediğini tahmin ediyorum.

Güncelleme : Tüm farkları daha iyi detaylandıran bir blog yazısı yazdım .

Firefox W3C standardını kullanır Node::textContent, ancak davranışı MSHTML'nin tescilli olanından "biraz" farklıdır innerText(onlarca diğer MSHTML özelliği arasında Opera tarafından da bir süre önce kopyalanmıştır).

Her şeyden önce, textContentbeyaz alan gösterimi innerTextbirinden farklıdır . İkincisi ve daha da önemlisi, textContent tüm SCRIPT etiketi içeriklerini içerirken, innerText içermez.

Sadece işleri daha eğlenceli hale getirmek için, Opera - standardı uygulamanın yanı sıra textContent- MSHTML'leri de eklemeye karar verdi, innerText ancak bunu değiştirecek şekilde değiştirditextContent - yani SCRIPT içerikleri dahil (aslında textContentve innerTextOpera'da muhtemelen birbirleriyle aynı şekilde taklit edilen) aynı sonuçlar üretiyor gibi görünüyor .

textContentNodearayüzün bir parçası , oysa innerTextbir parçasıdır HTMLElement. Bu, örneğin, araç siz "almak" anlamına textContentdeğil, innerTextmetin düğümlerden:

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

Son olarak, Safari 2.x'in de hatalı bir innerTextuygulaması var. Safari'de, innerTextyalnızca bir öğe style.display == "none"belgeden gizlenmediği ( veya geçmediği) veya öksüz kaldığında düzgün çalışır . Aksi takdirde, innerTextboş bir dizeyle sonuçlanır.

textContentSoyutlama ile oynuyordum (bu eksikliklerin üstesinden gelmek için), ama oldukça karmaşık olduğu ortaya çıktı .

Yapmanız gereken en iyi şey, önce tam gereksinimlerinizi tanımlamak ve oradan takip etmektir . Etiketleri innerHTML, olası tüm textContent/ innerTextsapmalarla uğraşmak yerine bir öğeden çıkarmak genellikle mümkündür .

Başka bir olasılık, elbette, DOM ağacını yürümek ve tekrarlanan metin düğümlerini toplamaktır.

Yalnızca metin içeriğini ayarlamanız ve almamanız gerekiyorsa, işte herhangi bir tarayıcıda kullanabileceğiniz önemsiz bir DOM sürümü; IE innerText uzantısını veya DOM Level 3 Core textContent özelliğini gerektirmez.

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

jQuery.text() herhangi bir tarayıcıda kullanılabilecek bir yöntem sağlar . Örneğin:

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

Prakash K'nin cevabına göre Firefox innerText özelliğini desteklemiyor. Böylece, kullanıcı aracısının bu özelliği destekleyip desteklemediğini test edebilir ve aşağıdaki gibi devam edebilirsiniz:

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

Gerçekten basit bir Javascript satırı, tüm ana tarayıcılarda "taggy olmayan" metni alabilir ...

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

O Not Element::innerTextözelliği olacak değil CSS stili "tarafından gizlendi metin içeren display:none0, renk: şeffaf, ve de buna (font-size dahil diğer CSS teknikleri ile maskelenmiş olan içerikleri düşecek şekilde (Google Chrome'da" metnin görünür bir şekilde görüntülenmemesine neden olan birkaç benzer efekt).

Diğer CSS özellikleri de dikkate alınır:

• İlk olarak, iç öğelerin "display:" stili, tarayıcının yerleşik stil sayfasındaki HTML blok öğelerinin varsayılanı olan ve davranışını geçersiz kılmayan bir blok içeriğini ("display: block" gibi) sınırlayıp sınırlamadığını belirlemek için ayrıştırılır. kendi CSS stiliniz); eğer öyleyse innerText özelliğinin değerine bir yeni satır eklenir. Bu textContent özelliğinde gerçekleşmez.
• Satır içi içerikler üreten CSS özellikleri de dikkate alınacaktır: örneğin satır <br \>içi bir satırsonu oluşturan satır içi eleman , innerText değerinde bir satırsonu oluşturur.
• "Display: satır içi" stili, textContent veya innerText öğelerinde yeni satıra neden olmaz.
• "Display: table" stili, tablonun etrafında ve tablo satırları arasında yeni satırlar oluşturur, ancak "display: table-cell" bir tablolama karakteri oluşturur.
• "Position: absolute" özelliği (display: block veya display: inline ile birlikte kullanılır, önemli değil) de satır kesmesinin eklenmesine neden olur.
• Bazı tarayıcılarda açıklıklar arasında tek bir boşluk ayrılması da bulunur

Ancak Element::textContentyine de, görünmez olsalar bile, uygulanan CSS'den bağımsız olarak iç metin öğelerinin TÜM içeriğini içerir. Ve textContent'te fazladan yeni satırlar veya boşluklar oluşturulmaz; bu, tüm stilleri ve yapıyı ve satır içi / blok veya konumlandırılmış iç eleman türlerini göz ardı eder.

Fare seçimini kullanarak bir kopyala / yapıştır işlemi, gizli metni panoya yerleştirilen düz metin biçiminde atar, bu nedenle içindeki her şeyi içermez textContent, ancak yalnızca içinde olanı içerir innerText(beyaz boşluk / yeni satır oluşturulduktan sonra yukarıdaki gibi) .

Daha sonra her iki mülk de Google Chrome'da desteklenir, ancak içerikleri farklı olabilir. Daha eski tarayıcılar hala textContent'in içerdiği gibi innetText'te her şeye dahil edildi (ancak o zamanlar beyaz alanların / yeni satırların oluşturulmasıyla ilgili davranışları tutarsızdı).

jQuery, tarayıcılar arasındaki bu tutarsızlıkları, $ () sorgusu aracılığıyla döndürdüğü ayrıştırılmış öğelere eklenen ".text ()" yöntemini kullanarak çözecektir. Dahili olarak, yalnızca "düğüm" düzeyinde çalışarak HTML DOM'ye bakarak zorlukları çözer. Böylece daha çok standart textContent gibi görünen bir şey döndürür.

Uyarı, bu jQuery yönteminin <br />, içeriğin alt öğelerinin (gibi ) neden olduğu ekranda görülebilecek fazladan boşluklar veya satır kesmeleri eklememesidir .

Erişilebilirlik için bazı komut dosyaları tasarlarsanız ve stil sayfanız, Braille okuyucuyla iletişim kurmak için kullanılan eklentiler gibi işitmeyen oluşturma için ayrıştırılırsa, bu araç, stilize olan açıklıklara eklenen belirli noktalama işaretlerini içermesi gerekiyorsa textContent'i kullanmalıdır. "display: none" ve genellikle sayfalara dahil edilir (örneğin üst yazılar / abonelikler için), aksi takdirde innerText Braille okuyucusunda çok kafa karıştırıcı olacaktır.

CSS hileleriyle gizlenen metinler artık bir HTML / CSS ayrıştırıcısı ve DOM özelliği kullanılarak büyük arama motorları tarafından (genellikle HTML sayfalarınızın CSS'sini ayrıştıracak ve arka plan üzerinde kontrast renkte olmayan metinleri de yok sayar) yok sayılır. "innerText" tıpkı modern görsel tarayıcılarda olduğu gibi (en azından bu görünmez içerik dizine eklenmeyecektir, bu nedenle gizli metin, içeriğinin kontrol edilmesi için bazı anahtar kelimelerin sayfaya eklenmesini zorlamak için bir hile olarak kullanılamaz); ancak bu gizli metin, sonuç sayfalarında (sayfa sonuçlara eklenecek dizinden hala kalifiye olmuşsa), ek stilleri ve komut dosyalarını şeritlemek için tam HTML yerine "textContent" özelliğini kullanarak görüntülenecektir.

Bu iki özellikten herhangi birine düz metin atarsanız, bu, kendisine uygulanan iç işaretlemenin ve stillerin üzerine yazar (yalnızca atanan öğe türünü, niteliklerini ve stillerini korur), böylece her iki özellik de aynı içeriği içerir . Bununla birlikte, bazı tarayıcılar artık innerText'e yazmayı onurlandırmayacak ve yalnızca textContent özelliğinin üzerine yazmanıza izin verecek (bu özelliklere yazarken HTML işaretlemesi ekleyemezsiniz, çünkü HTML özel karakterleri tam anlamıyla görünmek için sayısal karakter referansları kullanılarak düzgün bir şekilde kodlanır , veya innerHTMLöğesinin atanmasından sonra özelliği okuduysanız .innerTexttextContent

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

Düzenleme (Mark Amery'ye aşağıdaki yorum için teşekkürler): Bunu, yalnızca (örneğin) jQuery gibi, bu özelliklerin varlığını kontrol etmeye hiçbir kodun güvenmeyeceğinin makul bir şüphe ötesinde biliyorsanız, bu şekilde yapın . Ancak jQuery kullanıyorsanız, muhtemelen "text" işlevini kullanırsınız ve diğer bazı yanıtların gösterdiği gibi $ ('# myElement'). Text ('foo') yaparsınız.

innerTextFirefox'a eklendi ve FF45 sürümünde mevcut olmalıdır: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Bir taslak şartname yazılmıştır ve gelecekte HTML yaşam standardına dahil edilmesi beklenmektedir: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Şu anda Firefox, Chrome ve IE uygulamalarının uyumsuz olduğunu unutmayın. İleride, eski IE uyumsuzken Firefox, Chrome ve Edge'in yakınsamalarını bekleyebiliriz.

Ayrıca bkz: https://github.com/whatwg/compat/issues/5

Böyle bir şeye ne dersin?

//$elem is the jQuery object passed along.

var $currentText = $elem.context.firstChild.data.toUpperCase();

** Benimkini büyük yapmam gerekiyordu.

Firefox v45'ten 2016'da olduğu gibi innerText, firefox üzerinde çalışıyor, desteğine bir göz atın: http://caniuse.com/#search=innerText

Firefox'un önceki sürümlerinde çalışmasını istiyorsanız, Firefox'ta daha iyi desteğitextContent olan, ancak eski IE sürümlerinde daha kötü olanı kullanabilirsiniz : http://caniuse.com/#search=textContent

Bu benim deneyim oldu innerText, textContent, innerHTMLve değer:

// 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

ie = internet explorer, ff = firefox, ch = google chrome. not 1: ff, değer geri silme ile silinene kadar çalışır - yukarıdaki Ray Vega'nın notuna bakın. not 2: kromda biraz çalışır - güncellemeden sonra değişmeden sonra uzağa tıklayıp alana geri tıklarsınız ve değer görünür. Partinin en iyisi elem.value = changeVal; ki ben yukarıda yorum yapmadım.

Sadece orijinal gönderinin altındaki yorumlardan yeniden gönderiyorum. innerHTML tüm tarayıcılarda çalışır. Teşekkürler stefita.

myElement.innerHTML = "foo";

burada buldum:

<!--[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]-->

innerTextDiğer tarayıcılardaki davranışları taklit etmek de mümkündür :

 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");
         }
     });
 }