在網(wǎng)頁表單中,文字提示是必不可少的。jQuery表單文字提示控制可以幫助我們實現(xiàn)更好的用戶交互效果。
要使用jQuery控制表單文字提示,首先需要引入jQuery庫,然后在JavaScript中編寫相關(guān)代碼。如下所示:
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function(){ $("input[type='text']").focus(function(){ $(this).siblings(".prompt").show(); }).blur(function(){ $(this).siblings(".prompt").hide(); }); }); </script>
上述代碼中,我們使用jQuery的選擇器選中了所有表單中的文本輸入框,為其綁定了focus和blur事件。當輸入框聚焦時,我們顯示了其兄弟元素中class為“prompt”的元素;當輸入框失焦時,則隱藏“prompt”元素。
接下來,我們需要在HTML中添加表單元素,并為其設(shè)置文字提示。如下所示:
<form> <label>用戶名:<input type="text" name="username"><span class="prompt">請輸入用戶名</span></label> <label>密碼:<input type="password" name="password"><span class="prompt">請輸入密碼</span></label> </form>
在上述HTML代碼中,我們?yōu)槊總€文本輸入框添加了一個“prompt”元素作為文字提示,通過設(shè)置CSS樣式,我們可以控制提示文字的顏色、字體大小等。
通過上述代碼,我們可以實現(xiàn)對表單文字提示的控制。這樣,用戶在填寫表單時,就能夠清晰地知道需要填寫哪些內(nèi)容,大大提高了用戶體驗。
上一篇div img 重合