'innerText' fonctionne dans IE, mais pas dans Firefox

J'ai du code JavaScript qui fonctionne dans IE contenant les éléments suivants:

myElement.innerText = "foo";

Cependant, il semble que la propriété 'innerText' ne fonctionne pas dans Firefox. Existe-t-il un équivalent de Firefox? Ou existe-t-il une propriété plus générique, multi-navigateurs, qui peut être utilisée?

Firefox utilise la propriété textContent conforme au W3C .

Je suppose que Safari et Opera prennent également en charge cette propriété.

Mise à jour : j'ai écrit un article de blog détaillant bien mieux toutes les différences .

Firefox utilise le standard W3C Node::textContent, mais son comportement diffère "légèrement" de celui du propriétaire de MSHTML innerText(copié également par Opera il y a quelque temps, parmi des dizaines d'autres fonctionnalités MSHTML).

Tout d'abord, la textContentreprésentation des espaces est différente d' innerTextune. Deuxièmement, et plus important encore, textContent inclut tout le contenu des balises SCRIPT , contrairement à innerText.

Juste pour rendre les choses plus divertissantes, Opera - en plus d'implémenter la norme textContent- a décidé d'ajouter également MSHTML, innerText mais l'a changé pour agir commetextContent - c'est-à-dire, y compris le contenu SCRIPT (en fait, textContentet innerTextdans Opera semble produire des résultats identiques, probablement simplement aliasés les uns aux autres) .

textContentfait partie de l' Nodeinterface, tandis que innerTextfait partie de HTMLElement. Cela signifie, par exemple, que vous pouvez "récupérer" textContentmais pas à innerTextpartir de nœuds de texte:

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

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

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

Enfin, Safari 2.x a également une innerTextimplémentation de buggy . Dans Safari, ne innerTextfonctionne correctement que si un élément n'est ni caché (via style.display == "none") ni orphelin du document. Sinon, innerTextrésulte en une chaîne vide.

Je jouais avec l' textContentabstraction (pour contourner ces lacunes), mais cela s'est avéré assez complexe .

Le mieux est de définir d'abord vos besoins exacts et de suivre à partir de là. Il est souvent possible de simplement retirer les balises innerHTMLd'un élément, plutôt que de traiter toutes les textContent/ innerTextdéviations possibles .

Une autre possibilité, bien sûr, consiste à parcourir l'arborescence DOM et à collecter les nœuds de texte de manière récursive.

Si vous avez seulement besoin de définir le contenu du texte et non de le récupérer, voici une version DOM triviale que vous pouvez utiliser sur n'importe quel navigateur; elle ne nécessite ni l'extension IE innerText ni la propriété DOM Level 3 Core textContent.

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

jQuery fournit une .text()méthode qui peut être utilisée dans n'importe quel navigateur. Par exemple:

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

Selon la réponse de Prakash K, Firefox ne prend pas en charge la propriété innerText. Vous pouvez donc simplement tester si l'agent utilisateur prend en charge cette propriété et procéder en conséquence comme ci-dessous:

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

Une ligne très simple de Javascript peut obtenir le texte "sans taggy" dans tous les principaux navigateurs ...

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

Notez que la Element::innerTextpropriété ne contiendra pas le texte qui a été masqué par le style CSS "display:none " dans Google Chrome (ainsi, il supprimera le contenu masqué par d'autres techniques CSS (y compris la taille de police: 0, la couleur: transparent et quelques autres effets similaires qui empêchent le texte d'être rendu de manière visible).

D'autres propriétés CSS sont également prises en compte:

• D'abord, le style "display:" des éléments internes est analysé pour déterminer s'il délimite un contenu de bloc (tel que "display: block" qui est la valeur par défaut des éléments de bloc HTML dans la feuille de style intégrée du navigateur, et dont le comportement n'a pas été remplacé par votre propre style CSS); si c'est le cas, une nouvelle ligne sera insérée dans la valeur de la propriété innerText. Cela ne se produira pas avec la propriété textContent.
• Les propriétés CSS qui génèrent du contenu en ligne seront également prises en compte: par exemple, l'élément en ligne <br \>qui génère une nouvelle ligne en ligne générera également une nouvelle ligne dans la valeur de innerText.
• Le style "display: inline" n'entraîne aucun retour à la ligne dans textContent ou innerText.
• Le style "display: table" génère des sauts de ligne autour du tableau et entre les lignes du tableau, mais "display: table-cell" générera un caractère de tabulation.
• La propriété "position: absolue" (utilisée avec display: block ou display: inline, cela n'a pas d'importance) provoquera également l'insertion d'un saut de ligne.
• Certains navigateurs incluront également une seule séparation d'espace entre les travées

Mais Element::textContentcontiendra toujours TOUS les contenus des éléments de texte internes indépendamment du CSS appliqué même s'ils sont invisibles. Et aucune nouvelle ligne ni aucun espace supplémentaire ne sera généré dans textContent, qui ignore simplement tous les styles et la structure et les types en ligne / bloc ou positionnés des éléments internes.

Une opération de copier / coller utilisant la sélection de la souris supprimera le texte caché au format de texte brut qui est placé dans le presse-papiers, de sorte qu'il ne contiendra pas tout dans le textContent, mais seulement ce qu'il contient innerText(après la génération d'espaces / de nouvelle ligne comme ci-dessus) .

Les deux propriétés sont ensuite prises en charge dans Google Chrome, mais leur contenu peut alors être différent. Les navigateurs plus anciens incluaient toujours dans innetText tout comme ce que textContent contient maintenant (mais leur comportement par rapport à la génération des espaces blancs / nouvelles lignes était incohérent).

jQuery résoudra ces incohérences entre les navigateurs en utilisant la méthode ".text ()" ajoutée aux éléments analysés qu'elle renvoie via une requête $ (). En interne, il résout les difficultés en examinant le DOM HTML, en travaillant uniquement avec le niveau "nœud". Ainsi, il renverra quelque chose ressemblant davantage à textContent standard.

La mise en garde est que cette méthode jQuery n'insérera pas d'espaces supplémentaires ou de sauts de ligne qui peuvent être visibles à l'écran en raison de sous-éléments (comme <br />) du contenu.

Si vous concevez des scripts pour l'accessibilité et que votre feuille de style est analysée pour un rendu non sonore, comme les plug-ins utilisés pour communiquer avec un lecteur braille, cet outil doit utiliser le textContent s'il doit inclure les signes de ponctuation spécifiques qui sont ajoutés dans des plages de style "display: none" et qui sont généralement inclus dans les pages (par exemple pour les exposants / indices), sinon le innerText sera très déroutant pour le lecteur Braille.

Les textes masqués par les astuces CSS sont désormais généralement ignorés par les principaux moteurs de recherche (qui analyseront également le CSS de vos pages HTML et ignoreront également les textes qui ne sont pas de couleurs contrastées en arrière-plan) à l'aide d'un analyseur HTML / CSS et de la propriété DOM "innerText" exactement comme dans les navigateurs visuels modernes (au moins ce contenu invisible ne sera pas indexé donc le texte caché ne peut pas être utilisé comme une astuce pour forcer l'inclusion de certains mots-clés dans la page pour vérifier son contenu); mais ce texte masqué sera toujours affiché dans la page de résultats (si la page était encore qualifiée à partir de l'index pour être incluse dans les résultats), en utilisant la propriété "textContent" au lieu du HTML complet pour supprimer les styles et scripts supplémentaires.

SI vous affectez du texte brut dans l'une de ces deux propriétés, cela remplacera le balisage interne et les styles qui lui sont appliqués (seul l'élément affecté conservera son type, ses attributs et ses styles), de sorte que les deux propriétés contiendront alors le même contenu . Cependant, certains navigateurs n'honoreront plus l'écriture dans innerText et ne vous permettront que d'écraser la propriété textContent (vous ne pouvez pas insérer de balisage HTML lors de l'écriture dans ces propriétés, car les caractères spéciaux HTML seront correctement encodés à l'aide de références de caractères numériques pour apparaître littéralement , si vous lisez ensuite la innerHTMLpropriété après l'affectation de innerTextou textContent.

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

Edit (merci à Mark Amery pour le commentaire ci-dessous): Ne le faites que si vous savez hors de tout doute raisonnable qu'aucun code ne s'appuiera sur la vérification de l'existence de ces propriétés, comme (par exemple) jQuery . Mais si vous utilisez jQuery, vous utiliserez probablement la fonction "text" et faire $ ('# myElement'). Text ('foo') comme le montrent certaines autres réponses.

innerTexta été ajouté à Firefox et devrait être disponible dans la version FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Un projet de spécification a été rédigé et devrait être intégré dans le standard de vie HTML à l'avenir: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Notez qu'actuellement les implémentations de Firefox, Chrome et IE sont toutes incompatibles. À l'avenir, nous pouvons probablement nous attendre à ce que Firefox, Chrome et Edge convergent alors que l'ancien IE reste incompatible.

Voir aussi: https://github.com/whatwg/compat/issues/5

Et quelque chose comme ça?

//$elem is the jQuery object passed along.

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

** J'avais besoin de mettre le mien en majuscule.

Comme en 2016 à partir de Firefox v45, innerTextfonctionne sur firefox, jetez un œil à son support: http://caniuse.com/#search=innerText

Si vous voulez qu'il fonctionne sur les versions précédentes de Firefox, vous pouvez utiliser textContentce qui a un meilleur support sur Firefox mais pire sur les anciennes versions d'IE : http://caniuse.com/#search=textContent

Cela a été mon expérience avec innerText, textContent, innerHTMLet la valeur:

// 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. note 1: ff fonctionne jusqu'à ce que la valeur soit supprimée avec retour arrière - voir la note de Ray Vega ci-dessus. note 2: fonctionne quelque peu en chrome - après la mise à jour, il reste inchangé, puis vous cliquez loin et cliquez de nouveau dans le champ et la valeur apparaît. Le meilleur du lot est elem.value = changeVal; que je n'ai pas commenté ci-dessus.

Juste republier des commentaires sous le message d'origine. innerHTML fonctionne dans tous les navigateurs. Merci stefita.

myElement.innerHTML = "foo";

trouvé ceci ici:

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

Il est également possible d'émuler le innerTextcomportement dans d'autres navigateurs:

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