„innerText” działa w IE, ale nie w Firefox

Mam kod JavaScript, który działa w IE, zawierający następujące elementy:

myElement.innerText = "foo";

Wydaje się jednak, że właściwość „innerText” nie działa w przeglądarce Firefox. Czy jest jakiś odpowiednik Firefoksa? A może istnieje bardziej ogólna właściwość dla wielu przeglądarek, z której można skorzystać?

Firefox używa tekstu zgodnego z W3C właściwości .

Sądzę, że Safari i Opera również obsługują tę właściwość.

Aktualizacja : Napisałem post na blogu, w którym wszystkie różnice zostały znacznie lepiej opisane.

Firefox używa standardu W3C Node::textContent, ale jego zachowanie „nieznacznie” różni się od własności MSHTML innerText(skopiowanej także przez Operę, jakiś czas temu, spośród kilkudziesięciu innych funkcji MSHTML).

Przede wszystkim textContentreprezentacja białych znaków różni się od innerTextjednego. Po drugie, i co ważniejsze, textContent zawiera całą zawartość znacznika SCRIPT , podczas gdy tekst wewnętrzny nie.

Żeby było bardziej zabawnie, Opera - oprócz implementacji standardu textContent- postanowiła również dodać MSHTML, innerText ale zmieniła go tak, by działał jakotextContent - tj. Włączając zawartość SCRIPT (w rzeczywistości, textContenta innerTextOpera wydaje się dawać identyczne wyniki, prawdopodobnie po prostu alias do siebie) .

textContentjest częścią Nodeinterfejsu, podczas gdy innerTextjest częścią HTMLElement. Oznacza to na przykład, że można „pobierać”, textContentale nie innerTextz węzłów tekstowych:

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

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

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

Wreszcie Safari 2.x ma również błędną innerTextimplementację. W przeglądarce Safari innerTextdziała poprawnie tylko wtedy, gdy element nie jest ukryty (przez style.display == "none") ani osierocony z dokumentu. W przeciwnym razie innerTextpowstanie pusty ciąg.

Bawiłem się textContentabstrakcją (aby obejść te braki), ale okazało się to dość skomplikowane .

Najlepiej jest najpierw zdefiniować dokładne wymagania i zacząć od tego momentu. Często można po prostu usunąć tagi innerHTMLz elementu, zamiast zajmować się wszystkimi możliwymi textContent/innerText odchyleniami.

Inną możliwością jest oczywiście przejście po drzewie DOM i rekurencyjne zbieranie węzłów tekstowych.

Jeśli potrzebujesz tylko ustawić treść tekstową, a nie pobierać, oto trywialna wersja DOM, której możesz używać w dowolnej przeglądarce; nie wymaga ani rozszerzenia IE innerText, ani właściwości textContent DOM Level 3 Core.

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

jQuery zapewnia .text()metodę, której można użyć w dowolnej przeglądarce. Na przykład:

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

Zgodnie z odpowiedzią Prakash K Firefox nie obsługuje właściwości innerText. Możesz więc po prostu przetestować, czy agent użytkownika obsługuje tę właściwość i postępować zgodnie z poniższym opisem:

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

Naprawdę prosta linia Javascript może uzyskać tekst „nie tagowany” we wszystkich głównych przeglądarkach ...

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

Pamiętaj, że Element::innerTextwłaściwość nie będzie zawierała tekstu ukrytego za pomocą stylu CSS „display:none ” w Google Chrome (a także usunie treść zamaskowaną przez inne techniki CSS (w tym rozmiar czcionki: 0, kolor: przezroczysty i kilka innych podobnych efektów, które powodują, że tekst nie jest renderowany w żaden widoczny sposób).

Inne właściwości CSS są również brane pod uwagę:

• Najpierw parsowany jest styl elementów wewnętrznych „display:” w celu ustalenia, czy ogranicza on zawartość bloku (np. „Display: block”, który jest domyślnym elementem bloków HTML w wbudowanym arkuszu stylów przeglądarki i którego zachowanie nie zostało zastąpione przez twój własny styl CSS); jeśli tak, nowy wiersz zostanie wstawiony do wartości właściwości innerText. Nie stanie się tak z właściwością textContent.
• Rozważone zostaną również właściwości CSS, które generują zawartość wbudowaną: na przykład element wbudowany, <br \>który generuje wbudowaną nową linię, również wygeneruje nową linię w wartości tekstu wewnętrznego.
• Styl „display: inline” nie powoduje wprowadzenia nowej linii ani w textContent, ani w textText.
• Styl „display: table” generuje nowe wiersze wokół tabeli i między wierszami tabeli, ale „display: table-cell” wygeneruje znak tabulacji.
• Właściwość „position: bezwzględna” (używana z display: block lub display: inline, to nie ma znaczenia) spowoduje także wstawienie podziału linii.
• Niektóre przeglądarki zawierają również pojedynczą separację spacji między zakresami

Ale Element::textContent nadal będzie zawierać WSZYSTKIE treści wewnętrznych elementów tekstowych niezależnie od zastosowanego CSS, nawet jeśli są niewidoczne. W textContent nie będą generowane żadne dodatkowe znaki nowej linii ani białe znaki, co po prostu ignoruje wszystkie style i strukturę oraz typy wewnętrzne / blokowe lub pozycjonowane elementów wewnętrznych.

Operacja kopiowania / wklejania za pomocą zaznaczenia myszą spowoduje usunięcie ukrytego tekstu w formacie zwykłego tekstu, który jest umieszczony w schowku, więc nie będzie zawierał wszystkiego w textContent, ale tylko to, co jest w innerTextśrodku (po wygenerowaniu białych znaków / nowej linii, jak wyżej) .

Obie właściwości są następnie obsługiwane w Google Chrome, ale ich treść może być inna. Starsze przeglądarki nadal zawierały innetText - wszystko to, co obecnie zawiera textContent (ale ich zachowanie w stosunku do generowania białych znaków / nowych linii było niespójne).

jQuery rozwiąże te niespójności między przeglądarkami za pomocą metody „.text ()” dodanej do przeanalizowanych elementów, które zwraca poprzez zapytanie $ (). Wewnętrznie rozwiązuje to problemy, zaglądając do HTML DOM, pracując tylko z poziomem „węzła”. Zwróci więc coś bardziej przypominającego standardową zawartość tekstową.

Zastrzeżenie polega na tym, że ta metoda jQuery nie wstawi żadnych dodatkowych spacji ani podziałów linii, które mogą być widoczne na ekranie z powodu podelementów (jak <br />) zawartości.

Jeśli zaprojektujesz niektóre skrypty dla ułatwienia dostępu, a arkusz stylów zostanie przeanalizowany pod kątem renderowania nie-dźwiękowego, na przykład wtyczek używanych do komunikacji z czytnikiem brajlowskim, to narzędzie powinno używać textContent, jeśli musi zawierać określone znaki interpunkcyjne dodane w rozpiętościach z „display: none” i które zazwyczaj są zawarte na stronach (na przykład dla indeksów górnych / dolnych), w przeciwnym razie tekst wewnętrzny będzie bardzo mylący dla czytnika brajlowskiego.

Teksty ukryte przez sztuczki CSS są teraz zwykle ignorowane przez główne wyszukiwarki (które będą również analizować CSS twoich stron HTML, a także będą ignorować teksty, które nie mają kontrastowych kolorów w tle) za pomocą parsera HTML / CSS i właściwości DOM „innerText” dokładnie tak, jak we współczesnych przeglądarkach wizualnych (przynajmniej ta niewidzialna treść nie będzie indeksowana, więc ukryty tekst nie może być użyty jako sztuczka wymuszająca włączenie niektórych słów kluczowych na stronę w celu sprawdzenia jej zawartości); ale ten ukryty tekst będzie nadal wyświetlany na stronie wyników (jeśli strona nadal kwalifikowała się z indeksu do uwzględnienia w wynikach), używając właściwości „textContent” zamiast pełnego HTML do usunięcia dodatkowych stylów i skryptów.

JEŻELI przypiszesz jakiś tekst w dowolnej z tych dwóch właściwości, spowoduje to zastąpienie wewnętrznego znacznika i stylów zastosowanych do niego (tylko przypisany element zachowa swój typ, atrybuty i style), więc obie właściwości będą wówczas zawierać tę samą treść . Jednak niektóre przeglądarki nie będą już honorować zapisu do innerText i pozwolą tylko nadpisać właściwość textContent (nie można wstawiać znaczników HTML podczas pisania do tych właściwości, ponieważ znaki specjalne HTML będą poprawnie kodowane przy użyciu odniesień znaków numerycznych, aby pojawiały się dosłownie , jeśli następnie przeczytasz innerHTMLwłaściwość po przypisaniu innerTextlub textContent.

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

Edycja (dzięki Mark Amery za komentarz poniżej): Zrób to w ten sposób tylko wtedy, gdy wiesz ponad wszelką wątpliwość, że żaden kod nie będzie polegał na sprawdzeniu istnienia tych właściwości, jak (na przykład) jQuery . Ale jeśli używasz jQuery, prawdopodobnie po prostu użyjesz funkcji „tekst” i wykonasz $ ('# myElement'). Text ('foo'), jak pokazują niektóre inne odpowiedzi.

innerTextzostał dodany do przeglądarki Firefox i powinien być dostępny w wersji FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Wersja robocza została napisana i powinna zostać włączona do standardu HTML w przyszłości: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Pamiętaj, że obecnie implementacje Firefox, Chrome i IE są niekompatybilne. W przyszłości możemy prawdopodobnie spodziewać się zbieżności Firefoksa, Chrome i Edge, podczas gdy stary IE pozostanie niezgodny.

Zobacz także: https://github.com/whatwg/compat/issues/5

Co powiesz na coś takiego?

//$elem is the jQuery object passed along.

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

** Musiałem zrobić moje wielkie litery.

Podobnie jak w 2016 r. Z przeglądarki Firefox v45, innerText działa na Firefox, spójrz na jego wsparcie: http://caniuse.com/#search=innerText

Jeśli chcesz, aby działał na poprzednich wersjach Firefoksa, możesz użyć textContent, który ma lepszą obsługę Firefoksa, ale gorzej na starszych wersjach IE : http://caniuse.com/#search=textContent

To było moje doświadczenie z innerText, textContent, innerHTMLi wartości:

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

tj. Internet Explorer, ff = Firefox, ch = Google Chrome. uwaga 1: ff działa aż do momentu usunięcia wartości z backspace - patrz uwaga Ray Vega powyżej. Uwaga 2: działa nieco w Chrome - po aktualizacji nie ulega zmianie, a następnie klikasz i klikasz z powrotem w pole, a wartość jest wyświetlana. Najlepsze jest to elem.value = changeVal; których nie skomentowałem powyżej.

Odpowiadam tylko na komentarze z oryginalnego postu. innerHTML działa we wszystkich przeglądarkach. Dzięki, Stefan.

myElement.innerHTML = "foo";

znalazłem to tutaj:

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

Możliwe jest również emulowanie innerTextzachowania w innych przeglądarkach:

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