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.
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)
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()