如何在javascript中編寫onblur和onfocus事件？

問題：如何在javascript中編寫onblur和onfocus事件？

<body onload="setBlurFocus()"> 
    <form method="POST" action="#"> 
       <input id="id_username" type="text" name="username" maxlength="100" /> 
       <input type="text" name="email" id="id_email" /> 
       <input type="password" name="password" id="id_password" /> 
     </form> 
    </body>

我寫道：

function setBlurFocus() { 
    var user_input = document.getElementById('id_username'); 
    var email = document.getElementById('id_email'); 
    var password = document.getElementById('id_password'); 
    user_input.onblur = userSetBlur(); 
    email.onblur = emailSetBlur(); 
    password.onblur = passSetBlur(); 
    user_input.onfocus = function() { 
      document.getElementById('id_username').value = '' 
     } 
    email.onfocus = function() { 
      document.getElementById('id_email').value = '' 
     } 
    password.onfocus = function() { 
      document.getElementById('id_password').value = '' 
     } 

} 

function userSetBlur() { 
    document.getElementById('id_username').value = 'Username' 
} 
function emailSetBlur() { 
    document.getElementById('id_email').value = 'Email' 
} 

function passSetBlur() { 
    document.getElementById('id_password').value = 'Password' 
}

問題？ 如何到generalize或optimized此代碼？

來源

2011-02-16 gomzi

爲什麼你能不能以這種方式使用的onblur和聚焦狀態？這似乎是做到這一點的方法。 – 2011-02-16 09:35:51

您可以隨時連接方法在JavaScript：

function setBlurFocus() { 
    var user_input = document.getElementById('id_username'); 
    user_input.onblur = someFunction; 
    // or with an anonymous function: 
    user_input.onfocus = function() { 
     // do something 
    } 
}

瞭解更多關於traditional event handling和events in general。

進一步解釋：

您連接功能setBlurFocus到load事件的文件。如果您必須使用JavaScript訪問DOM元素，這是正確的。當創建所有元素時，會觸發load事件。

如果您將setBlurFocus()附加到input字段的blur事件，則該函數僅在文本框失去焦點時執行。

從你的問題我斷定你不想在HTML中設置事件處理程序，但你想在setBlurFocus函數中設置它們的形式。

關於你提到的更新：

這是錯誤的：

user_input.onblur = userSetBlur();

此分配功能的返回值到onblur。你要分配的功能本身，所以你必須寫：

user_input.onblur = userSetBlur;

的()調用功能。你不想要（大多數情況下，有例外，見下文）。

此外，您不必使用onblur的指定函數和onfocus的匿名函數。這只是一個例子，向您展示您擁有的不同可能性。例如。如果您只將一個事件處理程序分配給一個元素，則無需將其定義爲額外的功能。但是如果你想要重用事件處理程序，你必須這樣做。

下面是一個改進版本：

function setBlurFocus() { 
    var values = ["Username", "Email", "Password"]; 
    var elements = [ 
     document.getElementById('id_username'), 
     document.getElementById('id_email'), 
     document.getElementById('id_password') 
    ]; 

    for(var i = elements.length; i--;) { 
     elements[i].onblur = setValue(values[i]); 
     elements[i].onfocus = emptyValue; 
    } 
} 

function setValue(defaultValue) { 
    return function(){this.value = defaultValue;}; 
} 

function emptyValue() { 
    this.value = ''; 
}

this事件處理程序內部參照處理程序被綁定到的元素。

注：這裏setValue回報功能，這就是爲什麼我們在這種情況下（不只是爲它分配）調用setValue。

重要注意事項：如果用戶輸入了一些數據，這也會將值重置爲Username等。您必須確保，只有在用戶沒有輸入數據的情況下才能重置它。喜歡的東西：

function setValue(defaultValue) { 
    return function(){ 
     if(this.value !== "") { 
      this.value = defaultValue; 
     } 
    }; 
}

而且你必須定義emptyValue類似：

function emptyValue(defaultValue) { 
    return function(){ 
     if(this.value === defaultValue) { 
      this.value = ""; 
     } 
    }; 
}

現在我知道你真正想要做什麼，也紛紛來看看HTML5's placeholder attribute。

來源

2011-02-16 09:36:22

我如何推廣這樣一種方式，即我只需要爲模糊編寫一個方法，而爲每個元素編寫另一個方法。 – gomzi 2011-02-16 10:16:43

關於你提到的更新

我使用jQuery你標籤的jQuery，代碼爲波紋管，你可以檢查現場樣品與此鏈接：

http://jsfiddle.net/e3test/zcGgz/

的html代碼：

<form method="POST" action="#"> 
      <input id="id_username" type="text" name="username" maxlength="100" /> 
<input type="text" name="email" id="id_email" /> 
<input type="password" name="password" id="id_password" /> 
</form>

javascript代碼：

$(function(){ 
    var selector = { 
     username: $('#id_username'), 
     email: $('#id_email'), 
     password: $('#id_password') 
    }; 

    for (var x in selector) { 
     selector[x].focus(function(){ 
      $(this).val(''); 
     }).blur(function(){ 
      $(this).val($(this).attr('name')); 
     }); 
    } 
});

希望它有幫助。

來源

2011-02-16 09:37:52 quocnguyen

，那麼您已經使用jQuery標記它，所以這是如何做到這一點jQuery中：

function setBlurFocus() { 
    //do stuff here 
} 

$('#id_username').blur(setBlurFocus);

或

$('#id_username').blur(function(){ 
    //do stuff here 
});

來源

2011-02-16 09:40:10 aiham

如何在javascript中編寫onblur和onfocus事件？

回答

相關問題