jquery是一款常用的JavaScript庫,它可以輕松實現瀏覽器和文檔的交互。其中,獲得和失去焦點是常見的交互方式之一。
$(selector).focus(function(){ // 獲得焦點時執行的代碼 }); $(selector).blur(function(){ // 失去焦點時執行的代碼 });
在上面的代碼中,我們可以使用$(selector)來選中需要操作的元素,然后通過focus()和blur()方法來綁定相應的事件。當元素獲得焦點時,focus()方法會被執行;當元素失去焦點時,blur()方法會被執行。
例如,我們可以通過鼠標點擊輸入框來讓其獲得焦點。此時,我們可以設置輸入框的背景顏色和邊框顏色,使其更加顯眼:
$("input").focus(function(){ $(this).css({"background-color": "#FFF", "border": "1px solid #4CAF50"}); });
同樣地,當輸入框失去焦點時,我們也可以執行一些操作。例如,我們可以驗證輸入框中的內容是否符合規范,如果不符合,則彈出提示框:
$("input").blur(function(){ var value = $(this).val(); if (value.length < 6) { alert("輸入內容不能少于6個字符!"); } });
當然,我們也可以將獲得和失去焦點的事件綁定在其他元素上,例如鏈接、按鈕等等。只需要將$(selector)指定為相應的元素即可。