小心IE7 javascript 的 getElementById Method 的問題

1. 要注意用相同的 name and id attributes for Form Inputs
chowky 很久以前都覺得奇怪,不過這是因為IE系列和其他不同的browser的分別,ie 是會search 左name attribute先,再search id attribute,但是其他browser是不會的。所以兩個attributes 都要用相同的名。避免發生問題

1
<input type="text" name="full_address" id="address" value="5th Avenue" />

2. 不要放name attribute 在form tag 入面。
和上面的情況非常相似,要避免IE的問題。

不過chowky 不知道name 是deprecated (哈)

Also, the name attribute for forms is deprecated in XHTML Strict, so it’s not best practice anyhow. The name attribute was added to form elements in older sites, so if you’re trying to debug a getElementById issue in IE7 on some inherited code, there could be a conflict occurring due to this fact.

1
<form id="contact_form">


3. 不要在任何element tag 中使用 id=”description”
這個真的奇怪,而且chowky 都不知道,因為未試過中招呢。~
不過原來好簡單。
因為是ie 的name attribute 和id attribute 的衝突。
大家有無留意過,每一個website都會有meta tag

1
2
<meta name="description" content="website description" />  
<!-- 就是這句,description 是name attribute,所以ie上其他的element 有description 要避免使用-->
1
2
3
//所以這兩句get出來的value : firefox 正常,但ie6,7 就會失敗,因為meta tag 是沒有value
var textareaBox = document.getElementById("description");  
alert(textareaBox.value);

如果不能改變html 的話,就看看原文,有提供簡單的方向去解決問題

Source: http://www.impressivewebs.com/avoiding-problems-with-javascript-getelementbyid-method-in-internet-explorer-7/

Share
About Chowky
Chowky 希望可以透過這個blog 來分享自己學到的知識。亦希望可以分享最新的資訊。 IT 轉變得很快,要常常留意市場的變化,面對大陸的競爭,香港的 IT 方面的人才要更有市場觸覺,緊貼市塲走勢。因為其他地方的IT技術已經走得比以往更快。不進則退,就讓大家一起來交流、提昇IT的心得! Chowky 因為工作關係,所以一開始接觸的是visual basic, foxpro ( 這不代表我老 ) 之後是 .NET, MSSQL 和 Crystal Report. 由工作學到的project management, system analysis and design 以及 system testing, user acceptance tests and different documentations. 另外,由不同的freelance 方面學到dreamweaver, javascript, php, mysql. 後來興起CMS wave, Chowky 亦學會了Joomla! 以及常用的javascript framwork: jquery and mootool. 連deisgn 都要自己包辦,所以接觸了photoshop, illustrator, firework. 新的工作方面,要利用RIA -- Flex and AIR 方面的技術。所以緊接下來應該會多一點分享ria 方面的技術 Chowky 所說的未必是對的,但我深信我所說的是未來 IT Trend. 大家亦應抱著懷疑的態度去分析每一件事,未經思考不要輕易相信。

No Comments, Be The First!

Leave a Reply