« JS習作：タブでコンテンツを切り替える | Back To Blog Top | JS習作：Lightbox風の物を作ってみる »
JS習作：IEでもimg要素のlabelを効かせる
概要
11月3週目のJavaScriptです。やりたかった事は以下。
- IEが、labelに含むimg要素のラベル付けに対応していない件を何とかする
- できればjQuery無しで作りたい。（が、しかし…）
ソースコード
結局jQueryを使用しました。
$(function () {
var ua = $.browser;
if(ua.msie) {
function inputFocus(inputId){
$('#' + inputId).focus().click();
}
$('label').click(function(){
var labelFor = $(this).attr('for');
inputFocus(labelFor);
});
}
});
学んだ事や雑感
ブラウザ間の差
input要素のtype属性がtextのみなら .focus(); で問題無かったのですが、checkboxやradioがあると .click(); も必要になりました。 で、そうなるとFirefoxでは逆にうまく動かなくなってしまいます。
それでは困るので、hokacchaさんのjQueryで簡単UserAgent判別 - Webtech Walkerを参考にUAで振り分けました。 ただし、この問題の解決方法は条件付コメントでも良いと思います。
jQueryを使わない
今回は比較的、使い回しを考えたコードを書きやすいかもしれないと思ったので、jQuery無しで書いてみようと思いました。 無理でした。
document.getElementById で取得した要素は onclick(); で動くのに、document.getElementsByTagName('label') で取得した要素は onclick(); が動かなくて、それじゃあってんで散々こねくり回した末に、
var labels = document.getElementsByTagName('label');
for(var i=0; i<labels.length; i++){
var labelFor = labels[i].getAttribute('for');
alert(labelFor);
}としたら、Firefoxではうまく取得できたけどIEだと nullnullnull... ってなってしまい、心が折れたと言うかヌルヌルすぎと言うか。
改良したい点
jQuery無しで同じ事ができるようになりたい。 もうちょっと色々分かってきたら、再挑戦したい。
こんにちは！
labels[i].getAttribute('for')
のところを、
labels[i].getAttributeNode('htmlFor')
にするとIEでも取れると思いますお！IEの仕様というか、いつものアレです。
でもこれだと今度は他のブラウザでヌルヌルなので
labels[i].getAttributeNode('for').nodeValue
こうすればIEでも他のブラウザでもとれます。
jQueryでは取れてるわけだから、こういうときはjQueryのソース見てみるといいと思いますよ！ちなみにこの処理はv1.3.2では1002行目あたりに書いてあります。
Name:hokaccha | 2009年12月02日 10:16