innerText vs textContent - getting some errors on

Question

This question already has an answer here:

• 'innerText' works in IE, but not in Firefox 15 answers

I'd getting some errors on my scripts here, in the first one I've declared a var text(); type to create a box with some text content.

var x=$('#x').text();

In my second .js I'm doing some handling on this var that ensure my text i'll have less char than max-length, here is:

var limitMaxLength = function(element) {
   var maxLength = $(element).data("max-length");
      if (maxLength) {
         $(element).on("keypress", function(event){
            if (event.target.innerText.length > maxLength || event.keyCode === 13) {
               event.preventDefault();
            }
      });
   }
};

So I having some issues on Firefox getting this error: [TypeError: event.target.innerText is undefined]

In IE, Opera, Chrome and Safari my code works fine, i'm getting error only on Firefox. *Sorry for my bad english.

Answer 1

innerText is not supported in FF.

You can fix the issue by using dynamic property names. At first, check which property is supported:

var textContent = ('textContent' in document) ? 'textContent' : 'innerText';

Define textContent as a global variable (or within the outmost scope), then you can use it like this:

var someText = elem[textContent];

This snippet gives you textContent if it's available, innerText otherwise. Notice also, that there's a small difference between these two properties.

A live demo at jsFiddle.

Though when you're using jQuery, why not just:

$(event.target).text()

Answer 2

innerText was a Microsoft Creation, left over from the days of old. Firefox decided not to support it in favour of the w3 compliant, textContent. However, IE8 & below do not support textContent, therefore, if you wish to support Legacy browsers, you're in a bit of a bind.

var text = elem.textContent || elem.innerText;

or

elem.innerHTML // eww, but it works, eh?

or, just ditch IE8 (easier said than done, especially at work)