當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

表单输入框聚焦输入内容显示叉叉清除效果

發布時間：2023/12/8 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了表单输入框聚焦输入内容显示叉叉清除效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

處理表單的時候，經常有這種效果，當我們輸入內容的時候輸入框右邊會動態顯示一個叉叉圖標，點擊可以清除已輸入的內容，當輸入框沒有輸入內容時，叉叉會自己消失，當輸入框焦點消失時，叉叉也會自己消失，最近剛好寫了一個這樣的效果，分享給大家，效果圖如下所示：

? ?

一：頁面html代碼：

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title> </head> <body> <div class="login"><form action="" method="post" namespace="/"><h4>用戶登錄</h4><ul class="login-con"><li><i class="i-icon l-icon"></i><input class="active" type="text" name="username" placeholder="請輸入您的用戶名" maxlength="16" autocomplete="off"/><i class="i-icon delete-icon"></i></li><li><i class="i-icon l-icon"></i><input class="active" type="text" name="password" onfocus="this.type='password'" placeholder="請輸入您的密碼" maxlength="16" autocomplete="off"/><i class="i-icon delete-icon"></i></li></ul><p class="error-msg"></p><div class="login-btn"><a href="javascript:void(0)" onclick="">登錄</a></div></form> </div> </body> </html>

二：css樣式代碼，放在head標簽里：

三：引入jquery，并監聽輸入框聚焦事件，聚焦后邊框高亮顯示，如果輸入框有輸入內容，則顯示叉叉圖標

四：監聽輸入框失去焦點事件，失去焦點去除邊框高亮顯示并且叉叉圖標隱藏

/*輸入框失去焦點的blur事件*/$("input").on("blur",function () {var $this = $(this);$this.parent().removeClass("active");$this.next(".delete-icon").hide();});

五：監聽鼠標松開事件，當輸入框有輸入內容就顯示叉叉圖標，反之則不顯示

$("input").keyup(function(){if( $(this).val().length > 0){$(this).next(".delete-icon").show();}else{$(this).next(".delete-icon").hide();}});

六：叉叉圖標綁定點擊刪除輸入框內容事件

/*刪除圖標的點擊事件*/$(".delete-icon").on("click",function () {$(this).prev("input").val("").focus();});

七：表單需要的事件都已經添加完了，但是我們發現當我們點擊叉叉圖標的時候，并不會清空輸入框的內容，而是圖標消失不見了，那么需要阻止瀏覽器默認事件,解決blur事件比click事件先執行的問題，為什么這樣寫可以參考上一篇文章：blur事件與click事件沖突的解決辦法，里面還介紹了多種解決方案

/*阻止瀏覽器默認事件,解決blur事件比click事件先執行的問題*/$(".delete-icon").on("mousedown",function(e) {e.preventDefault();})

這樣就完整地實現了效果，四五六七步驟的代碼都放在頁面加載完即$(function(){})里。
原文作者技術博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，愛閱讀，愛交友，將工作中遇到的問題記錄在這里，希望給每一個看到的你能帶來一點幫助。
歡迎留言交流

總結

以上是生活随笔為你收集整理的表单输入框聚焦输入内容显示叉叉清除效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Windows无法访问\\xxx.xxx
下一篇： eclipse导入web项目出现红色叉叉