jQuery是一個功能強大的JavaScript庫,它能夠在網頁中輕松地添加交互式元素和動畫效果。其中,改變input輸入框的樣式和動畫效果是很常見的需求。
$(document).ready(function(){ //為輸入框添加聚焦事件 $('input').focus(function(){ $(this).parent().addClass('focus'); }); //為輸入框添加失焦事件 $('input').blur(function(){ $(this).parent().removeClass('focus'); }); //為輸入框添加輸入事件 $('input').on('input', function(){ if($(this).val() != ''){ $(this).parent().addClass('filled'); } else{ $(this).parent().removeClass('filled'); } }); });
上述代碼實現了輸入框的三種狀態:聚焦狀態、失焦狀態和已輸入值狀態。其中,聚焦狀態和失焦狀態可以通過添加和移除類名來實現樣式效果;已輸入值狀態通過監聽輸入事件并判斷輸入框是否為空來實現。
下面是對應的CSS樣式:
.form-group { position: relative; } .form-group input { width: 100%; border: none; outline: none; font-size: 1rem; padding: 1rem; background-color: #f0f0f0; } .form-group.focus input { background-color: #fff; box-shadow: 0 0 0 0.1rem #007bff; } .form-group.filled input { background-color: #fff; }
CSS樣式中,聚焦狀態和失焦狀態通過更改輸入框的背景顏色和添加外陰影來實現;已輸入值狀態同樣是通過更改輸入框的背景顏色來實現。
以上就是一個簡單的jQuery輸入框特效實現的代碼片段,可以在網頁中為輸入框添加一些有趣的交互效果。