jQuery輸入框暗影提示是一種非常常見的用戶交互效果,因為它可以使用戶更容易理解輸入框的用途和輸入格式。本文將介紹使用jQuery實現輸入框暗影提示的方法。
// HTML代碼 <input type="text" id="inputBox" name="inputBox" placeholder="請輸入內容"> // CSS代碼 #inputBox { border: 1px solid #ccc; padding: 5px; font-size: 16px; } // jQuery代碼 $(function() { // 獲取輸入框 var inputBox = $("#inputBox"); // 獲取提示信息 var placeholderText = inputBox.attr("placeholder"); // 給輸入框添加提示信息 inputBox.val(placeholderText); // 當輸入框獲取焦點時,清除提示信息 inputBox.focus(function() { if (inputBox.val() == placeholderText) { inputBox.val(""); } }); // 當輸入框失去焦點時,如果沒有輸入內容則重新添加提示信息 inputBox.blur(function() { if (inputBox.val() == "") { inputBox.val(placeholderText); } }); });
以上代碼中,我們先獲取輸入框和提示信息,然后通過設置輸入框的value為提示信息,實現了默認顯示提示信息的效果。當輸入框獲得焦點時,我們通過判斷輸入框的內容是否為提示信息來清除提示信息。當輸入框失去焦點時,我們再次判斷輸入框的內容是否為空,如果為空則重新添加提示信息。
輸入框暗影提示的實現非常簡單,只需要使用jQuery的事件處理函數和attr方法即可。此外,我們還可以通過CSS樣式來美化輸入框的外觀,使其更符合網站的整體風格。
上一篇css怎么去除表格邊框
下一篇css怎么寫優秀代碼