快捷導(dǎo)航

JavaScript實(shí)現(xiàn)輸入框與清空按鈕聯(lián)動(dòng)效果

更新時(shí)間：2016年09月09日 15:50:29 投稿：mrr

本文給大家分享基于js實(shí)現(xiàn)輸入框與清空框按鈕聯(lián)動(dòng)效果，非常實(shí)用，代碼簡(jiǎn)單易懂，感興趣的朋友一起看看吧

廢話不多說(shuō)了，直接給大家貼關(guān)鍵代碼了，具體代碼如下所示：

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>輸入框清空按鈕</title><scriptsrc="js/jquery1.8.3.min.js"></script><script>/**
* 校驗(yàn)當(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實(shí)現(xiàn)輸入框與清空按鈕聯(lián)動(dòng)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼
這篇文章主要介紹了JS組件Bootstrap實(shí)現(xiàn)彈出框效果代碼的相關(guān)資料，對(duì)彈出框感興趣的小伙伴們可以參考一下
2016-04-04
Three.js加載外部模型的教程詳解
這篇文章主要介紹了Three.js外部模型加載的教程詳解,在文章給大家補(bǔ)充介紹了three.js 外部模型加載json的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-11-11
JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車功能插件實(shí)例【附demo源碼下載】
這篇文章主要介紹了JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車功能插件,結(jié)合完整實(shí)例形式分析了JS結(jié)合HTML5的storage特性存儲(chǔ)數(shù)據(jù)實(shí)現(xiàn)購(gòu)物車功能的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-10-10
模仿JQuery sortable效果代碼有錯(cuò)但值得看看
模仿JQuery sortable效果代碼有錯(cuò)但值得看看，因?yàn)闀r(shí)間關(guān)系，需要的朋友可以參考下。
2009-11-11
uni.getLocation和wx.getLocation方法調(diào)用無(wú)效也不返回失敗的解決方案
這篇文章主要給大家介紹了關(guān)于uni.getLocation和wx.getLocation方法調(diào)用無(wú)效也不返回失敗的解決方案,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-04-04
js自定義事件及事件交互原理概述(二)
上一篇的目的只是讓大家簡(jiǎn)單的理解自定事件是如何模擬出來(lái)的，大家不難發(fā)現(xiàn)會(huì)有很多缺陷,本篇主要已解決上一篇的問(wèn)題為主，感興趣的朋友可以參考，或許本文對(duì)你有所幫助
2013-02-02
微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)，格式如4天7小時(shí)58分鐘39秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
微信小程序如何獲取用戶信息
這篇文章主要為大家詳細(xì)介紹了微信小程序如何獲取用戶信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法
本文主要介紹了React+Typescript實(shí)現(xiàn)倒計(jì)時(shí)Hook的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
js獲取當(dāng)前頁(yè)面的url網(wǎng)址信息
這篇文章主要介紹了通過(guò)js如何獲取當(dāng)前頁(yè)面的url網(wǎng)址信息,需要的朋友可以參考下
2014-06-06