對于網頁中的輸入框,我們經常需要對其進行樣式的修改,比如改變聚焦狀態下的邊框顏色、背景色等,就可以使用jQuery進行操作。
一般來說,我們需要對輸入框設置聚焦和失焦事件,以便在聚焦時添加特定的樣式,在失焦時移除這些樣式。下面是實現此操作的代碼:
$(function(){ // 給輸入框綁定聚焦事件 $('input').focus(function(){ $(this).addClass('focus'); }); // 給輸入框綁定失焦事件 $('input').blur(function(){ $(this).removeClass('focus'); }); });
在上述代碼中,我們使用了focus和blur方法分別綁定了輸入框的聚焦和失焦事件。當輸入框聚焦時,就會執行addClass方法添加名為focus的樣式類,當輸入框失焦時,則會執行removeClass方法移除該樣式類。
在CSS樣式中,我們可以為名為focus的樣式類設置輸入框的聚焦效果,如下所示:
input.focus{ border: 1px solid #999; background-color: #EEE; }
以上表示,當輸入框處于聚焦狀態時,設置其邊框為1像素寬的實線狀邊框,顏色為#999,背景色為#EEE。
在以上的代碼示例中,我們僅僅演示了如何使用jQuery對輸入框進行聚焦樣式的設置,實際上,jQuery還有很多其他的API可以用來操作輸入框,比如獲取輸入框文本、限制輸入框字符數等,有興趣的可以去查看相關文檔。
上一篇jquery輸入框聚焦
下一篇css怎么寫網頁大小