webentwicklung-frage-antwort-db.com.de

'innerText' funktioniert im IE, aber nicht in Firefox

Ich habe einen JavaScript-Code, der in IE mit folgendem Inhalt funktioniert:

myElement.innerText = "foo";

Es scheint jedoch, dass die Eigenschaft 'innerText' in Firefox nicht funktioniert. Gibt es ein Firefox-Äquivalent? Oder gibt es eine allgemeinere, browserübergreifende Eigenschaft, die verwendet werden kann?

286
Ray Vega

Firefox verwendet die Eigenschaft W3C-konformtextContent .

Ich denke, Safari und Opera unterstützen diese Eigenschaft ebenfalls.

247
Prakash K

Aktualisieren: Ich habe einen Blogpost geschrieben, der alle Unterschiede aufzeigt viel besser.


Firefox verwendet den W3C-Standard Node::textContent, Aber sein Verhalten unterscheidet sich "geringfügig" von dem von MSHTMLs proprietärem innerText (das vor einiger Zeit auch von Opera kopiert wurde, unter Dutzenden anderer MSHTML-Funktionen) ).

Zunächst unterscheidet sich die Darstellung von textContent Leerzeichen von der Darstellung von innerText. Zweitens, und was noch wichtiger ist, enthält textContent den gesamten Inhalt des SCRIPT-Tags , InnerText hingegen nicht.

Um die Dinge unterhaltsamer zu gestalten, hat Opera - neben der Implementierung des Standards textContent - beschlossen, auch MSHTMLs innerText hinzuzufügen, es jedoch geändert, um als textContent - dh das Einbeziehen von SCRIPT-Inhalten (tatsächlich scheinen textContent und innerText in Opera identische Ergebnisse zu liefern, wahrscheinlich zu sein nur aneinander angeglichen).

textContent ist Teil der Schnittstelle Node, während innerText Teil von HTMLElement ist. Dies bedeutet zum Beispiel, dass Sie textContent, aber nicht innerText von Textknoten "abrufen" können:

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

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

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

Schließlich hat Safari 2.x auch eine fehlerhafte innerText -Implementierung. In Safari funktioniert innerText nur dann ordnungsgemäß, wenn ein Element weder ausgeblendet (über style.display == "none") Noch aus dem Dokument verwaist ist. Andernfalls führt innerText zu einer leeren Zeichenfolge.

Ich habe mit der Abstraktion textContent gespielt (um diese Mängel zu umgehen), aber es stellte sich als ziemlich komplex heraus.

Am besten definieren Sie zuerst Ihre genauen Anforderungen und folgen von dort aus. Es ist oft möglich, einfach Tags von innerHTML eines Elements zu entfernen, anstatt alle möglichen textContent/innerText Abweichungen zu behandeln.

Eine andere Möglichkeit besteht natürlich darin, den DOM-Baum zu durchlaufen und rekursiv Textknoten zu sammeln.

278
kangax

Wenn Sie nur Textinhalte festlegen und nicht abrufen müssen, finden Sie hier eine einfache DOM-Version, die Sie in jedem Browser verwenden können. Es ist weder die IE innerText-Erweiterung noch die DOM Level 3 Core-Eigenschaft textContent erforderlich.

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

jQuery bietet eine .text() Methode, die in jedem Browser verwendet werden kann. Zum Beispiel:

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

Gemäß der Antwort von Prakash K unterstützt Firefox die innerText-Eigenschaft nicht. Sie können also einfach testen, ob der Benutzeragent diese Eigenschaft unterstützt, und wie folgt vorgehen:

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

Eine wirklich einfache Javascript-Zeile kann den "non-taggy" -Text in allen gängigen Browsern abrufen ...

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

Notiere dass der Element::innerText Eigenschaft wird nicht den Text enthalten, der durch den CSS-Stil "display:none "in Google Chrome (auch wird der Inhalt gelöscht, der von anderen CSS-Techniken maskiert wurde (einschließlich Schriftgröße: 0, Farbe: transparent und ein paar ähnliche Effekte) bewirken, dass der Text nicht sichtbar gerendert wird).

Andere CSS-Eigenschaften werden ebenfalls berücksichtigt:

  • Zunächst wird der Stil "display:" innerer Elemente analysiert, um festzustellen, ob er einen Blockinhalt begrenzt (z. B. "display: block", der die Standardeinstellung für HTML-Blockelemente im eingebauten Stylesheet des Browsers ist und dessen Verhalten nicht durch "überschrieben" wurde Ihren eigenen CSS-Stil); In diesem Fall wird eine neue Zeile in den Wert der innerText-Eigenschaft eingefügt. Bei der Eigenschaft textContent ist dies nicht der Fall.
  • Die CSS-Eigenschaften, die Inline-Inhalte generieren, werden ebenfalls berücksichtigt: Zum Beispiel das Inline-Element <br \>, das eine Inline-Newline generiert, generiert auch eine Newline im Wert von innerText.
  • Der Stil "display: inline" verursacht weder in textContent noch in innerText eine neue Zeile.
  • Der Stil "display: table" generiert Zeilenumbrüche in der Tabelle und zwischen den Tabellenzeilen, "display: table-cell" generiert jedoch ein Tabellenzeichen.
  • Die Eigenschaft "position: absolute" (wird mit display: block oder display: inline verwendet, spielt keine Rolle) bewirkt auch das Einfügen eines Zeilenumbruchs.
  • Einige Browser enthalten auch eine Trennung zwischen den einzelnen Abschnitten

Aber Element::textContent enthält unabhängig vom angewendeten CSS ALLE Inhalte innerer Textelemente, auch wenn diese unsichtbar sind. In textContent werden keine zusätzlichen Zeilenumbrüche oder Leerzeichen generiert. Dabei werden nur alle Stile und die Struktur sowie Inline-/Block- oder positionierte Typen innerer Elemente ignoriert.

Beim Kopieren/Einfügen mit der Maus wird der verborgene Text im Nur-Text-Format verworfen, das in die Zwischenablage gestellt wird, sodass nicht alles in textContent enthalten ist, sondern nur das, was in innerText (nach Whitespace/Newline-Generierung wie oben).

Beide Eigenschaften werden dann in Google Chrome unterstützt, ihr Inhalt kann sich dann jedoch unterscheiden. Ältere Browser, die noch in innetText enthalten sind, enthalten alles, was textContent jetzt enthält (aber ihr Verhalten in Bezug auf die Erzeugung von Leerzeichen/Zeilenumbrüchen war inkonsistent).

jQuery behebt diese Inkonsistenzen zwischen Browsern mithilfe der Methode ".text ()", die den analysierten Elementen hinzugefügt wird, die es über eine $ () - Abfrage zurückgibt. Intern löst es die Schwierigkeiten, indem es in das HTML-DOM schaut und nur mit der "Knoten" -Ebene arbeitet. Es wird also etwas zurückgegeben, das eher wie der Standardtextinhalt aussieht.

Die Einschränkung ist, dass diese jQuery-Methode keine zusätzlichen Leerzeichen oder Zeilenumbrüche einfügt, die auf dem Bildschirm durch Unterelemente (wie <br />) des Inhalts.

Wenn Sie einige Skripte für den barrierefreien Zugriff entwerfen und Ihr Stylesheet für nicht-akustisches Rendering analysiert wird, z. B. Plugins für die Kommunikation mit einem Braille-Reader, sollte dieses Tool den TextContent verwenden, wenn es die spezifischen Interpunktionszeichen enthalten muss, die in mit gestalteten Feldern hinzugefügt werden "display: none" und die normalerweise in Seiten enthalten sind (z. B. für hochgestellte/tiefgestellte Zeichen), da sonst der Innentext für den Braille-Leser sehr verwirrend ist.

Mit CSS-Tricks ausgeblendete Texte werden jetzt in der Regel von großen Suchmaschinen ignoriert (die auch das CSS Ihrer HTML-Seiten analysieren und Texte ignorieren, die im Hintergrund keine kontrastierenden Farben aufweisen), indem ein HTML/CSS-Parser und die DOM-Eigenschaft verwendet werden "innerText" genau wie in modernen visuellen Browsern (zumindest wird dieser unsichtbare Inhalt nicht indiziert, sodass verborgener Text nicht als Trick verwendet werden kann, um die Aufnahme einiger Schlüsselwörter in die Seite zu erzwingen, um deren Inhalt zu überprüfen); Dieser verborgene Text wird jedoch weiterhin auf der Ergebnisseite angezeigt (wenn die Seite noch aus dem Index ausgewählt wurde, um in die Ergebnisse aufgenommen zu werden). Verwenden Sie dazu die Eigenschaft "textContent" anstelle des vollständigen HTML-Codes, um die zusätzlichen Stile und Skripte zu entfernen.

Wenn Sie in einer dieser beiden Eigenschaften Klartext zuweisen, werden das innere Markup und die darauf angewendeten Stile überschrieben (nur das zugewiesene Element behält seinen Typ, seine Attribute und Stile bei), sodass beide Eigenschaften denselben Inhalt enthalten . In einigen Browsern wird das Schreiben in innerText jedoch nicht mehr unterstützt, und Sie können nur die Eigenschaft textContent überschreiben (Sie können beim Schreiben in diese Eigenschaften kein HTML-Markup einfügen, da HTML-Sonderzeichen ordnungsgemäß mit numerischen Zeichenverweisen codiert werden, damit sie wörtlich erscheinen , wenn Sie dann die Eigenschaft innerHTML nach der Zuweisung von innerText oder textContent lesen.

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

Bearbeiten (danke an Mark Amery für den Kommentar unten): Tun Sie dies nur, wenn Sie zweifelsfrei wissen, dass sich kein Code darauf verlassen kann, die Existenz dieser Eigenschaften zu überprüfen, wie z. B. jQuery = macht. Wenn Sie jedoch jQuery verwenden, würden Sie wahrscheinlich nur die Funktion "text" verwenden und $ ('# myElement'). Text ('foo') ausführen, wie einige andere Antworten zeigen.

5
Kwateco

innerText wurde Firefox hinzugefügt und sollte in der FF45-Version verfügbar sein: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Eine Entwurfsspezifikation wurde geschrieben und wird voraussichtlich in Zukunft in den HTML-Lebensstandard aufgenommen: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/465

Beachten Sie, dass derzeit die Implementierungen von Firefox, Chrome und IE) nicht kompatibel sind. In Zukunft können wir wahrscheinlich Firefox, Chrome) erwarten = und Edge konvergieren, solange sie alt sind IE bleibt inkompatibel.

Siehe auch: https://github.com/whatwg/compat/issues/5

4
Bob

Wie schon 2016 in Firefox v45 funktioniert innerText auch in Firefox. Schauen Sie sich die Unterstützung an: http://caniuse.com/#search=innerText

Wenn Sie möchten, dass es in früheren Versionen von Firefox funktioniert, können Sie textContent verwenden, das Firefox besser unterstützt , jedoch in älteren Versionen schlechter IE) = versions : http://caniuse.com/#search=textContent

1
Vandervals

Was ist mit so etwas?

//$elem is the jQuery object passed along.

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

** Ich musste mein Großbuchstaben machen.

1
Webmaster G

Dies war meine Erfahrung mit innerText, textContent, innerHTML und value:

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

dh = Internet Explorer, ff = Firefox, ch = Google Chrome. note 1: ff funktioniert, bis der Wert mit der Rücktaste gelöscht wurde - siehe Hinweis von Ray Vega oben. Anmerkung 2: funktioniert etwas in chrome - nach dem Update ist es unverändert, dann klickst du weg und wieder in das Feld und der Wert erscheint. Das Beste des Loses ist elem.value = changeVal; was ich oben nicht kommentiert habe.

0
gerard

Ich reposte nur von Kommentaren unter dem ursprünglichen Beitrag. innerHTML funktioniert in allen Browsern. Danke Stefita.

myElement.innerHTML = "foo";

0
Leonid Alzhin