JS實(shí)現(xiàn)搜索框文字可刪除功能
更新時(shí)間:2016年12月28日 10:58:58 作者:舊顏_
本文給大家分享一段js代碼實(shí)現(xiàn)搜索框文字可刪除功能,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
廢話不多說了,直接給大家貼js搜索框文字可刪除功能,具體代碼如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS實(shí)現(xiàn)搜索框文字可刪除</title> <style> *:focus {outline: none; } body {width: 400px;margin: 100px auto;} #topsearch {height: 33px;} #topsearch .input {border: 1px solid #77c03a;height: 100%;} #topsearch .input .clear {width: 30px;height: 35px;line-height: 30px;text-align: center;padding-right: 10px;visibility: hidden;opacity: 0.8;color: gray;} #topsearch input[type=text] {height:20px;width: 250px;border: none;padding: 5px;} #topsearch div {float: left;} #topsearch button {width: 100px;height: 35px;background: #77c03a;color: #fff;border: none;} </style> </head> <body> <div id="topsearch"> <div class="input"><input type="text" id="search"><span class="clear" id="delete">×</span></div> <button type="button" name="searchz">Search</button> </div> <script> document.getElementById("search").addEventListener("keyup", function() { if (this.value.length > 0) { document.getElementById("delete").style.visibility = "visible"; document.getElementById("delete").onclick = function() { document.getElementById("search").value = ""; } } else { document.getElementById("delete").style.visibility = "hidden"; } }); </script> </body> </html>
您可能感興趣的文章:
- jquery實(shí)現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
- jQuery實(shí)現(xiàn)動(dòng)態(tài)文字搜索功能
- javascript搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)
- 利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
- JavaScript前端頁面搜索功能案例【基于jQuery】
- jQuery Jsonp跨域模擬搜索引擎
- jquery中用jsonp實(shí)現(xiàn)搜索框功能
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- 基于jquery的頁面劃詞搜索JS
- jquery+json實(shí)現(xiàn)的搜索加分頁效果
- jQuery單頁面文字搜索插件jquery.fullsearch.js的使用方法
相關(guān)文章
微信小程序webview中監(jiān)聽返回按鈕實(shí)現(xiàn)步驟
在微信小程序中webview返回鍵是一個(gè)非常實(shí)用的功能,它允許用戶在嵌入的網(wǎng)頁中返回到上一個(gè)頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實(shí)現(xiàn)步驟,需要的朋友可以參考下2024-08-08用Javascript評估用戶輸入密碼的強(qiáng)度(Knockout版)
早上看到博友6點(diǎn)多發(fā)的一篇關(guān)于密碼強(qiáng)度的文章(連接),甚是感動(dòng)(周末大早上還來發(fā)文)2011-11-11JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總
這篇文章主要介紹了JavaScript判斷數(shù)字是否為質(zhì)數(shù)的方法匯總的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06參考:關(guān)于Javascript中實(shí)現(xiàn)暫停的幾篇文章
參考:關(guān)于Javascript中實(shí)現(xiàn)暫停的幾篇文章...2007-03-03JavaScript實(shí)現(xiàn)將圖片地址轉(zhuǎn)成文件流并上傳
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)將圖片地址轉(zhuǎn)成文件流并上傳,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04Js判斷參數(shù)(String,Array,Object)是否為undefined或者值為空
在一些前端控件要提交數(shù)據(jù)到服務(wù)器端的數(shù)據(jù)驗(yàn)證過程中,需要判斷提交的數(shù)據(jù)是否為空。如果是普通表單的字符串?dāng)?shù)據(jù),只需要在 trim 后判斷 length 即可,而這里需要的數(shù)據(jù)可以是各種不同的類型,通過 JSON.stringify(data) 進(jìn)行序列化后再傳遞2013-11-11基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10