JavaScript實現(xiàn)輸入框與清空按鈕聯(lián)動效果
更新時間：2016年09月09日 15:50:29 投稿：mrr
本文給大家分享基于js實現(xiàn)輸入框與清空框按鈕聯(lián)動效果，非常實用，代碼簡單易懂，感興趣的朋友一起看看吧
廢話不多說了，直接給大家貼關(guān)鍵代碼了，具體代碼如下所示：
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>輸入框清空按鈕</title><scriptsrc="js/jquery1.8.3.min.js"></script><script>/**
* 校驗當(dāng)前輸入框的值,如果不為空顯示清空按鈕
* @param element
*/functioncheckInput(element){var value = $(element).val();
if(value!=null&&''!=value)
$(element).parent().parent().children().children('.button').removeClass('none');
else
$(element).parent().parent().children().children('.button').addClass('none');
}
/**
* 清空輸入框內(nèi)容
* @param element
*/functionclearInput(element){
$(element).parent().parent().children().children('input').val('');
$(element).addClass('none');
}
</script><style>.none{
display: none;
}.height-20{
height:20px;;}.button{
color: red;
font-size:18px;
width:100px;
height:18px;;border:1px solid red;
border-radius:5px;
}</style></head><body><div><div><inputtype="text"placeholder="輸入試試看"onkeyup="checkInput(this);" >
</div><divclass="height-20" ></div><div>
<aclass="none button"onclick="clearInput(this);" >clear input</a></div></div></body>
</html>
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++)
{ $numbering.append($('
').text(i)); }; $numbering.fadeIn(1700); }); });
以上所述是小編給大家介紹的JavaScript實現(xiàn)輸入框與清空按鈕聯(lián)動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- JS通過正則限制 input 輸入框只能輸入整數(shù)、小數(shù)(金額或者現(xiàn)金) 兩位小數(shù)
- JavaScript仿支付寶密碼輸入框
- js簡單實現(xiàn)表單中點擊按鈕動態(tài)增加輸入框數(shù)量的方法
- js下拉選擇框與輸入框聯(lián)動實現(xiàn)添加選中值到輸入框的方法
- 全國省市二級聯(lián)動下拉菜單 js版
- js實現(xiàn)簡單的省市縣三級聯(lián)動效果實例
- 實例詳解AngularJS實現(xiàn)無限級聯(lián)動菜單
- JSON+Jquery省市區(qū)三級聯(lián)動
- jQuery+JSON實現(xiàn)AJAX二級聯(lián)動實例分析
相關(guān)文章
這篇文章主要介紹了JS組件Bootstrap實現(xiàn)彈出框效果代碼的相關(guān)資料，對彈出框感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了Three.js外部模型加載的教程詳解,在文章給大家補充介紹了three.js 外部模型加載json的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-11-11
JS+HTML5實現(xiàn)的前端購物車功能插件實例【附demo源碼下載】
這篇文章主要介紹了JS+HTML5實現(xiàn)的前端購物車功能插件,結(jié)合完整實例形式分析了JS結(jié)合HTML5的storage特性存儲數(shù)據(jù)實現(xiàn)購物車功能的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-10-10
模仿JQuery sortable效果 代碼有錯但值得看看，因為時間關(guān)系，需要的朋友可以參考下。2009-11-11
uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案
這篇文章主要給大家介紹了關(guān)于uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案,文中通過實例代碼以及圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-04-04
上一篇的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發(fā)現(xiàn)會有很多缺陷,本篇主要已解決上一篇的問題為主，感興趣的朋友可以參考，或許本文對你有所幫助2013-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序動態(tài)顯示項目倒計時，格式如4天7小時58分鐘39秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序如何獲取用戶信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
React+Typescript實現(xiàn)倒計時Hook的方法
本文主要介紹了React+Typescript實現(xiàn)倒計時Hook的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了通過js如何獲取當(dāng)前頁面的url網(wǎng)址信息,需要的朋友可以參考下2014-06-06