jQuery是一種流行的JavaScript庫,可以簡化對DOM元素的操作,提供豐富的事件處理和動畫效果,同時還提供了獲取和操作輸入框(input)的方法。其中一個常用的功能是輸入框輸入提示,也稱為placeholder。
// 普通輸入框提示 $('input[placeholder]').each(function () { var $input = $(this); var placeholder = $input.attr('placeholder'); // 初始化提示 $input.val(placeholder) .addClass('placeholder'); // 輸入或失去焦點時判斷是否顯示提示 $input.on('focus.placeholder blur.placeholder', function () { if ($input.val() === placeholder) { $input.val('').removeClass('placeholder'); } else if ($input.val() === '') { $input.val(placeholder).addClass('placeholder'); } }); // 提交表單時去掉提示數據 $input.closest('form').submit(function () { if ($input.val() === placeholder) { $input.val(''); } }); }); // 密碼輸入框提示 var $pwdInput = $('input[type=password][placeholder]'); if ($pwdInput.length >0) { $pwdInput.after('') .hide() .on('keyup', function () { $pwdInput.val($(this).val()); }); }
上述代碼實現了兩種不同類型的輸入框輸入提示:普通輸入框提示和密碼輸入框提示。普通輸入框提示只需要在輸入框上添加placeholder屬性,jQuery會自動初始化并判斷輸入框是否為空,然后添加或刪除提示。密碼輸入框提示將密碼框隱藏并添加另一個文本框,當用戶輸入時,同時修改密碼框和文本框的值,確保兩者同步。這樣,即使用戶沒有填寫密碼,也可以正確提交表單。
在實際開發中,輸入框輸入提示可以提高用戶體驗,避免填寫無效數據,有效提高表單提交成功率。jQuery提供了豐富的DOM操作和事件處理方法,能夠輕松實現輸入框輸入提示功能。
上一篇純css點擊彈出圖