'innerText' funziona in IE, ma non in Firefox

Ho del codice JavaScript che funziona in IE contenente quanto segue:

myElement.innerText = "foo";

Tuttavia, sembra che la proprietà 'innerText' non funzioni in Firefox. Esiste un equivalente di Firefox? Oppure esiste una proprietà più generica per browser diversi che può essere utilizzata?

Firefox utilizza la proprietà textContent conforme a W3C .

Immagino che Safari e Opera supportino anche questa proprietà.

Aggiornamento : ho scritto un post sul blog che descrive in modo molto migliore tutte le differenze .

Firefox utilizza lo standard W3C Node::textContent, ma il suo comportamento differisce "leggermente" da quello del proprietario di MSHTML innerText(copiato anche da Opera, qualche tempo fa, tra dozzine di altre funzionalità MSHTML).

Prima di tutto, la textContentrappresentazione degli spazi bianchi è diversa da innerTextuna. In secondo luogo, e soprattutto, textContent include tutto il contenuto dei tag SCRIPT , mentre innerText no.

Solo per rendere le cose più divertenti, Opera - oltre a implementare lo standard textContent- ha deciso di aggiungere anche MSHTML innerText ma lo ha cambiato in modo da comportarsi cometextContent - cioè includendo i contenuti SCRIPT (in effetti, textContente innerTextin Opera sembrano produrre risultati identici, probabilmente essendo solo uno con l'altro) .

textContentfa parte Nodedell'interfaccia, mentre innerTextfa parte di HTMLElement. Questo, ad esempio, significa che puoi "recuperare" textContentma non innerTextdai nodi di testo:

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

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

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

Infine, Safari 2.x ha anche innerTextun'implementazione errata . In Safari, innerTextfunziona correttamente solo se un elemento non è né nascosto (via style.display == "none") né orfano dal documento. Altrimenti, innerTextrisulta in una stringa vuota.

Stavo giocando con l' textContentastrazione (per ovviare a queste carenze), ma si è rivelato piuttosto complesso .

La scommessa migliore è innanzitutto definire i requisiti esatti e seguire da lì. Spesso è possibile semplicemente rimuovere i tag da innerHTMLun elemento, anziché occuparsi di tutte le possibili textContent/ innerTextdeviazioni.

Un'altra possibilità, ovviamente, è quella di percorrere l'albero del DOM e raccogliere ricorsivamente nodi di testo.

Se devi solo impostare il contenuto del testo e non recuperarlo, ecco una banale versione DOM che puoi utilizzare su qualsiasi browser; non richiede né l'estensione IE innerText né la proprietà textContent di 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 fornisce un .text()metodo che può essere utilizzato in qualsiasi browser. Per esempio:

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

Secondo la risposta di Prakash K, Firefox non supporta la proprietà innerText. Quindi puoi semplicemente verificare se l'agente utente supporta questa proprietà e procedere di conseguenza come di seguito:

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

Una riga davvero semplice di Javascript può ottenere il testo "non taggy" in tutti i principali browser ...

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

Nota che la Element::innerTextproprietà non conterrà il testo che è stato nascosto dallo stile CSS "display:none " in Google Chrome (inoltre eliminerà il contenuto che è stato mascherato da altre tecniche CSS (inclusi dimensioni del carattere: 0, colore: trasparente e alcuni altri effetti simili che impediscono il rendering del testo in modo visibile).

Altre proprietà CSS sono anche considerate:

• Innanzitutto viene analizzato lo stile "display:" degli elementi interni per determinare se delimita un contenuto di blocco (come "display: block" che è il valore predefinito degli elementi di blocco HTML nel foglio di stile incorporato del browser e il cui comportamento non è stato sostituito da il tuo stile CSS); in tal caso verrà inserita una nuova riga nel valore della proprietà innerText. Questo non accadrà con la proprietà textContent.
• Saranno prese in considerazione anche le proprietà CSS che generano contenuti inline: ad esempio l'elemento inline <br \>che genera una nuova riga incorporata genererà anche una nuova riga nel valore di innerText.
• Lo stile "display: inline" non provoca newline in textContent o innerText.
• Lo stile "display: table" genera nuove righe attorno alla tabella e tra le righe della tabella, ma "display: table-cell" genererà un carattere di tabulazione.
• La proprietà "position: absolute" (usata con display: block o display: inline, non importa) farà anche inserire un'interruzione di riga.
• Alcuni browser includeranno anche una singola separazione dello spazio tra span

Conterrà Element::textContentcomunque TUTTI i contenuti degli elementi di testo interni indipendentemente dal CSS applicato anche se sono invisibili. E nessuna nuova riga o spazio bianco verrà generata in textContent, che ignora semplicemente tutti gli stili e la struttura e i tipi di elementi interni incorporati / in blocco / posizionati.

Un'operazione di copia / incolla utilizzando la selezione del mouse eliminerà il testo nascosto nel formato di testo normale che viene inserito negli appunti, quindi non conterrà tutto textContentciò che è dentro, ma solo ciò che è dentro innerText(dopo la generazione di spazi bianchi / newline come sopra) .

Entrambe le proprietà sono quindi supportate in Google Chrome, ma il loro contenuto potrebbe essere diverso. I browser precedenti includevano ancora in innetText tutto come quello che contiene textContent (ma il loro comportamento in relazione alla generazione di spazi bianchi / newline era incoerente).

jQuery risolverà queste incoerenze tra i browser usando il metodo ".text ()" aggiunto agli elementi analizzati che restituisce tramite una query $ (). Internamente, risolve le difficoltà esaminando il DOM HTML, lavorando solo con il livello "nodo". Quindi restituirà qualcosa che assomiglia di più al textContent standard.

L'avvertenza è che questo metodo jQuery non inserirà spazi aggiuntivi o interruzioni di riga che potrebbero essere visibili sullo schermo a causa di elementi secondari (come <br />) del contenuto.

Se si progettano alcuni script per l'accessibilità e il foglio di stile viene analizzato per il rendering non auricolare, come i plug-in utilizzati per comunicare con un lettore Braille, questo strumento dovrebbe utilizzare il textContent se deve includere i segni di punteggiatura specifici che vengono aggiunti in span in stile con "display: none" e che sono generalmente inclusi nelle pagine (ad esempio per apice / pedice), altrimenti il ​​testo interno sarà molto confuso sul lettore Braille.

I testi nascosti dai trucchi CSS sono ora in genere ignorati dai principali motori di ricerca (che analizzeranno anche il CSS delle tue pagine HTML e ignoreranno anche i testi che non hanno colori contrastanti sullo sfondo) usando un parser HTML / CSS e la proprietà DOM "innerText" esattamente come nei moderni browser visivi (almeno questo contenuto invisibile non verrà indicizzato, quindi il testo nascosto non può essere usato come un trucco per forzare l'inclusione di alcune parole chiave nella pagina per verificarne il contenuto); ma questo testo nascosto verrà visualizzato nella pagina dei risultati (se la pagina era ancora qualificata dall'indice per essere inclusa nei risultati), usando la proprietà "textContent" anziché l'HTML completo per eliminare gli stili e gli script extra.

Se assegni del testo in chiaro in una di queste due proprietà, questo sovrascriverà il markup interno e gli stili ad esso applicati (solo l'elemento assegnato manterrà il suo tipo, attributi e stili), quindi entrambe le proprietà conterranno lo stesso contenuto . Tuttavia, alcuni browser ora non onoreranno più la scrittura su innerText e ti consentiranno solo di sovrascrivere la proprietà textContent (non è possibile inserire markup HTML quando si scrive su queste proprietà, poiché i caratteri speciali HTML verranno codificati correttamente usando riferimenti numerici per apparire letteralmente , se poi leggi la innerHTMLproprietà dopo l'assegnazione di innerTexto textContent.

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

Modifica (grazie a Mark Amery per il commento qui sotto): fallo solo se sai oltre ogni ragionevole dubbio che nessun codice si affiderà al controllo dell'esistenza di queste proprietà, come (ad esempio) fa jQuery . Ma se stai usando jQuery, probabilmente useresti semplicemente la funzione "text" e faresti $ ('# myElement'). Text ('pippo') come mostrano altre risposte.

innerTextè stato aggiunto a Firefox e dovrebbe essere disponibile nella versione FF45: https://bugzilla.mozilla.org/show_bug.cgi?id=264412

Una bozza di specifiche è stata scritta e dovrebbe essere incorporata nello standard di vita HTML in futuro: http://rocallahan.github.io/innerText-spec/ , https://github.com/whatwg/html/issues/ 465

Nota che attualmente le implementazioni di Firefox, Chrome e IE sono tutte incompatibili. In futuro, possiamo probabilmente aspettarci che convergano Firefox, Chrome e Edge mentre il vecchio IE rimane incompatibile.

Vedi anche: https://github.com/whatwg/compat/issues/5

Che ne dici di qualcosa del genere?

//$elem is the jQuery object passed along.

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

** Avevo bisogno di rendere il mio maiuscolo.

Come nel 2016 da Firefox v45, innerTextfunziona su Firefox, dai un'occhiata al suo supporto: http://caniuse.com/#search=innerText

Se vuoi che funzioni con le versioni precedenti di Firefox, puoi usarlo textContent, che ha un supporto migliore su Firefox ma peggio su versioni IE precedenti : http://caniuse.com/#search=textContent

Questa è stata la mia esperienza con innerText, textContent, innerHTMLe il valore:

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

cioè = internet explorer, ff = firefox, ch = google chrome. nota 1: ff funziona fino a quando non viene eliminato il valore con backspace - vedere la nota di Ray Vega sopra. nota 2: funziona in qualche modo con Chrome: dopo l'aggiornamento è invariato, quindi fai clic e rientri nel campo e viene visualizzato il valore. Il migliore del lotto è elem.value = changeVal; che non ho commentato sopra.

Ripubblicando solo dai commenti sotto il post originale. innerHTML funziona in tutti i browser. Grazie stefita.

myElement.innerHTML = "foo";

trovato questo qui:

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

È anche possibile emulare il innerTextcomportamento in altri browser:

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