Question

有人可以告诉我我做错了吗？

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的初学者，所以我还不习惯调试代码。

由于

路

Answer 1

您的问题在于附加事件处理程序。您应该绑定到onfocus和onblur（请注意小写事件名称）。

作为建议，您可能希望查看一个非常简单的跨浏览器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

Answer 2

问题是，当fieldSelect和fieldDeselect被调用时，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引用触发事件的元素。

Answer 3

两件事，事件应该全部为小写（onfocus，onblur）而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')"; 
}

标准兼容浏览器会将事件对象传递给事件处理程序。 IE使用全局window.event对象。无论哪种方式，您都可以使用该对象来获取触发处理程序的事件的目标。

另一个可能更好的选择是设置和删除className功能，而不是直接更改样式。然后在样式表中放置一个名为maybe selected的样式来覆盖背景图像。这样你就可以将风格信息和行为分开。

Answer 4

而不是window.onload = initform尝试window.onload = function（）{/ init函数/ } 同样在引用函数时，即使没有参数，也应该使用（）。

简单的JavaScript不起作用

4 个答案: