This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
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()
Related
This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
I am trying to obtain the innerText of a 'TD' element by using jQuery's parents() and find().
allTitles = $("[href='/myLink/param?foo=1234']").parents("table:first").parents("table:first").find(".field_text");
name = allTitles[0].children[0].innerText;
console.log(name);
The code works fine in Chrome, but in Firefox the console prints out "null".
I did some debugging and the problem seems to be in the parents() function. While in Chrome I get all the attributes from the table elements, in Firefox it seems like the attributes are not being read and therefore resulting in "null" when we call find(".field_text").
Why does Chrome and Firefox behave differently event though I am using the same jQuery file?
JavaScript is handled differently in browsers. It could be to do with with that. As you are already using jQuery, you could just carry on using it for your second query. Also if you are in control of your HTML, you can make your first query a lot simpler by adding a class to the second parant table:
var allTitles = $("[href='...']").closest(".your-class").find(".field_text");
var name = allTitles.children().first().text();
console.log(name);
The problem was actually with children.innerText, it doesn't work with Firefox.
Just changed to children.textContent and it solved the problem.
Reference:
children.innerText is not working in firefox
I'm using this code to remove an element
function deleteMyElement(id) {
var elem = document.getElementById("myElement" + id);
elem.remove();
}
It works fine for chrome and firefox but not for ie. The console shows me an error: The object does not support the remove method.
How can I get this working in all common browsers?
By doing it the normal way.
elem.parentNode.removeChild(elem);
.remove is a jQuery method, not JavaScript.
EDIT: Apparently, it's planned to be a JavaScript method. Kind of daft in my opinion, but there you go. Since it's experimental, it is not necessarily supported in all browsers.
I want to change the page title using jQuery, But it doesn't work in IE, Why?
The code like this:
alert( $('title').text() ); // empty in IE
$('title').text('Some Text!'); // Don't work in IE
Yes, we can use document.title = 'xxxx'; to change the title conent.
title.innerHTML is read-only in IE. Also looks like innerText has some limitations.
$(document).prop('title', 'Some Text!');
Here to answer your original question. It's a known bug.
alert($('title').text()); // empty in IE <= 8
The reason why this happens is because the page title is somewhat special in Internet Explorer <= 8; how special?
document.getElementsByTagName('title')[0].firstChild; // null
When you use jQuery.text() it iterates over all child nodes of an element and concatenates their text representations to form the final result; because the firstChild property is null, this will obviously not work.
The page title is available as innerText and innerHTML properties, but attempting to write those properties will cause an "unknown" runtime error.
if you want to use as much jQuery as you can,
$("title").innerHTML = $("title").attr("text", "New title");
works on IE8.
Using the document.title property is the simple cross-browser way to set or retrieve the document title. IE just doesn't want to play right
try this
document.title = "This is new title.";
This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
function OpenWindow(anchor) {
var toUsername = anchor.innerText;
window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "width=340,height=200");
}
this function opens up a page with parameter as undefined in firefox where as in google chrome I get proper value.
Firefox url:
http://localhost:9452/ChatWindow.aspx?username=undefined
What is the solution for this issue?
While innerText is non-standard, it significantly differs from textContent, because first one is doing pretty printing (for example, <br/> are converted to new lines), while second one - is not.
So, while common wisdom is to use:
var toUsername = anchor.innerText || anchor.textContent;
or some kind of wrapper, it can probably be smarter to just use jQuery's .text or its analog from other library you are using.
try to change anchor.innerText with:
anchor.textContent
this hopefully works in all browsers.
also see here: 'innerText' works in IE, but not in Firefox
P.S. I really reccomend using JQuery to avoid these kind of issues and to be sure to always write fully cross-browser javascript.
innerText is a Microsoft invention whereas textContent is a W3C standard.
function OpenWindow(anchor) {
var toUsername = anchor.textContent || anchor.innerText || '';
window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "width=340,height=200");
}
This should work. MooTools or some other JavaScript framework should be able to help with cross-browser inconsistencies.
use textContent for innerText.
example
<script>
function change()
{
document.getElementById("label").textContent="Hello";
}
</script>
it will work on ff. and chrome too. but not work on IE.
I was getting the same problem because Firefox does not support the innerText property, instead, it supports the textContent property. so check for the browser’s feature support to use the correct property accordingly.
if(document.all){
document.getElementById('element').innerText = "myText";
} else{
document.getElementById('element').textContent = "myText";
}
or it's better to use Jquery to resolve cross browser issues.
Usage:
$('element').text("myText");
This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com
In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.
Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.
Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.