Javascript 在输入上调用函数

Question

当我单击我的输入来更改字段的背景颜色时，我想要。我想通过调用一个函数来做到这一点。我究竟做错了什么 ？谢谢！

<input type="text" onFocus="makefieldred();" onBlur="makefieldwhite();" >


<script>
function makefieldred() {
    this.style.backgroundcolor='red' ;
    }
function makefieldwhite() {
    this.style.backgroundcolor='white' ;
    }
</script>

Answer 1

this 在你的函数调用中不是元素，因为你连接它们的方式。另外，属性名称是backgroundColor（大写C）而不是backgroundcolor：

如果要使用onXyz属性机制，最简单的方法就是将元素传入函数中：

<input type="text" onFocus="makefieldred(this);" onBlur="makefieldwhite(this);" >


<script>
function makefieldred(elm) {
    elm.style.backgroundColor='red' ;
}
function makefieldwhite(elm) {
    elm.style.backgroundColor='white' ;
}
</script>

或者，使用现代技术来设置事件处理程序：

<input type="text" id="the Input">


<script>
(function() {
    var input = document.getElementById("theInput");
    input.addEventListener("focus", makefieldred, false);
    input.addEventListener("blur", makefieldwhite, false);

    function makefieldred() {
        this.style.backgroundColor='red' ;
    }
    function makefieldwhite() {
        this.style.backgroundColor='white' ;
    }
</script>

如果您必须支持 IE8，如果在 input 上看不到 addEventListener，则需要使用 attachEvent。要处理浏览器不兼容问题，您可以使用函数 (taken from my other answer here)：

var hookEvent = (function() {
    var div;

    // The function we use on standard-compliant browsers
    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    // The function we use on browsers with the previous Microsoft-specific mechanism
    function oldIEHookEvent(element, eventName, handler) {
        element.attachEvent("on" + eventName, function(e) {
            e = e || window.event;
            e.preventDefault = oldIEPreventDefault;
            e.stopPropagation = oldIEStopPropagation;
            handler.call(element, e);
        });
        return element;
    }

    // Polyfill for preventDefault on old IE
    function oldIEPreventDefault() {
        this.returnValue = false;
    }

    // Polyfill for stopPropagation on old IE
    function oldIEStopPropagation() {
        this.cancelBubble = true;
    }

    // Return the appropriate function; we don't rely on document.body
    // here just in case someone wants to use this within the head
    div = document.createElement('div');
    if (div.addEventListener) {
        div = undefined;
        return standardHookEvent;
    }
    if (div.attachEvent) {
        div = undefined;
        return oldIEHookEvent;
    }
    throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

然后：

<script>
(function() {
    var input = document.getElementById("theInput");
    hookEvent(input, "focus", makefieldred);
    hookEvent(input, "blur", makefieldwhite);

    function makefieldred() {
        this.style.backgroundColor='red' ;
    }
    function makefieldwhite() {
        this.style.backgroundColor='white' ;
    }
</script>