2010-06-21 153 views
0

有人可以告訴我我做錯了什麼嗎?簡單的JavaScript無法正常工作

window.onload = initForm; 
function initForm() { 
    var allTags = document.getElementsByTagName("*"); 
    for(i=0; i<allTags.length; i++) { 
     if (allTags[i].className.indexOf("textbox") > -1) { 
      allTags[i].onFocus = fieldSelect; 
      allTags[i].onBlur = fieldDeSelect;   
     } 
    } 
} 
function fieldSelect() { 
    this.style.backgroundImage = "url('inputBackSelected.png')"; 
} 

function fieldDeSelect() { 
    this.style.backgroundImage = "url('inputBack.png')"; 
} 

我是JavaScript的初學者,所以我不習慣調試代碼。

感謝

盧克

+3

什麼具體isnt工作,並且你得到一個錯誤? – 2010-06-21 19:48:38

+0

你確定這是'.png'圖片的正確路徑嗎?他們不在'images /'目錄或其他東西? – ceejayoz 2010-06-21 19:51:44

+0

你想要做的第一件事是什麼?這是否與一個HTML文件或東西? – OscarRyz 2010-06-21 19:53:17

回答

-1

相反的window.onload的=嘗試在initForm =的window.onload函數(){/ 初始化函數/} 也指的一種功能,當你應該使用()即使沒有參數。

+3

並非如此。 'window.onload = initform'完全合法。你將'window.onload'的值賦給''function initform'',如果你要添加'()',它會立即調用該函數並將'window.onload'賦給'initform'的返回值。 – gnarf 2010-06-21 19:56:54

1

問題是,當fieldSelectfieldDeselect被調用時,this引用的是window對象,而不是引發該事件的元素。你可能要考慮使用jQuery:

$(document).ready(function() { 
    $('.textbox').focus(fieldSelect).blur(fieldDeselect); 
}); 

function fieldSelect() { 
    $(this).css('background-image', 'url("inputBackSelected.png")'); 
} 

function fieldDeselect() { 
    $(this).css('background-image', 'url("inputBack.png")'); 
} 

的jQuery需要確保當你的事件處理程序獲取調用,this是指觸發事件的元素的照顧。

+0

這是問題。 – David 2010-06-21 19:56:39

+0

(在Internet Explorer ...) – gnarf 2010-06-21 20:43:50

3

你的問題在於附加你的事件處理程序。您應該綁定到onfocusonblur(注意小寫事件名稱)。

作爲一個建議,你可能想看看一個非常簡單的跨瀏覽器addEvent()用的代碼快速線加入,以確保正確this指針:

function addEvent(obj, evType, fn, useCapture){ 
    if (obj.addEventListener){ 
    obj.addEventListener(evType, fn, useCapture); 
    return true; 
    } else if (obj.attachEvent){ 
    // fix added by me to handle the `this` issue 
    var r = obj.attachEvent("on"+evType, function(){ 
     retrun fn.apply(obj, arguments); 
    }); 
    return r; 
    } else { 
    alert("Handler could not be attached"); 
    } 
} 

然後使用addEvent函數,而不是allTags[i].onfocus =你在未來的約束事件中可能會有更好的里程。

addEvent(allTags[i], 'focus', fieldSelect); 
addEvent(allTags[i], 'blur', fieldDeSelect); 

jsfiddle demonstration

1

兩件事情,這些事件應該是所有小寫(onfocusonblur)和this沒有指向觸發在IE事件的對象。試試這個:

function fieldSelect(e) { 
    var event; 
    if(!e) { 
     event = window.event; 
    } else { 
     event = e; 
    } 
    event.target.style.backgroundImage = "url('inputBackSelected.png')"; 
} 

function fieldDeSelect(e) { 
    var event; 
    if(!e) { 
     event = window.event; 
    } else { 
     event = e; 
    } 
    event.target.style.backgroundImage = "url('inputBack.png')"; 
} 

標準complient瀏覽器將事件對象傳遞給事件處理程序。 IE使用全局的window.event對象。無論哪種方式,您都可以使用該對象來獲取觸發處理程序的事件的目標。

另一個可能更可取的選擇是將您的功能設置並刪除className而不是直接更改樣式。然後在樣式表中放置一個叫做maybe selected的樣式來覆蓋背景圖片。這樣你保持風格信息和行爲分開。

+2

'e = e || window.event;'是確保'e'中適當事件對象的快速方法。如果'e'是falsy(undefined/0 /''/ etc),JavaScript或運算符'||'將導致'window.event'被分配給'e'; – gnarf 2010-06-21 21:03:31

+0

感謝您的迴應,似乎我已經在onBlur而不是onblur的事實意味着它不起作用。但firefox的firebig,也沒有鉻的檢查員指出了這一點。無論如何,它現在起作用了,而且似乎也可以在IE 8中工作。但不確定其他版本的IE。 – StrattonL 2010-06-21 21:18:15

+0

我的意思是螢火蟲! – StrattonL 2010-06-21 21:18:48