在網頁設計中,輸入框的提示語對用戶體驗至關重要。Jquery提供了一些方便的方法來實現輸入框提示語的功能。
//給輸入框添加提示語 $(function(){ var input = $('input[name="username"]'); var defaultValue = input.val(); //獲取輸入框默認值 input.focus(function(){ if($(this).val() === defaultValue){ //若輸入框當前值等于默認值,則清空輸入框 $(this).val(''); } }).blur(function(){ //若輸入框失去焦點且用戶未輸入,則重置為默認值 if($(this).val() === ''){ $(this).val(defaultValue); } }); });
上述代碼使用了Jquery的focus()和blur()方法,可以實現在輸入框獲得焦點和失去焦點時自動清除或恢復輸入框的提示語。若需要更改提示語,可以簡單地修改defaultValue的值即可。
同時,為了讓用戶更清晰地辨認輸入框的提示語,我們可以為其添加CSS樣式:
input::-webkit-input-placeholder{ color: #999; } input::-moz-placeholder{ color: #999; } input::-ms-input-placeholder{ color: #999; }
上述代碼為不同瀏覽器設置輸入框提示語樣式,可以提高用戶體驗。
綜上,Jquery提供了方便的方法來實現輸入框的提示語,同時添加樣式可以更好地提高用戶體驗。
下一篇css怎么做橫線