<!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)文章

淺析javascript中的DOM
本文主要給大家簡(jiǎn)單介紹了是什么是DOM、動(dòng)態(tài)操作DOM元素的方法、使用jsjs操作樣式以及Form對(duì)象的簡(jiǎn)介，是個(gè)人對(duì)于javascript中的DOM的理解的總結(jié)，推薦給小伙伴們。
2015-03-03
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
Javascript中的this,bind和that使用實(shí)例
這篇文章主要介紹了Javascript中的this,bind和that使用實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
js原生日歷的實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇js原生日歷的實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
淺談JavaScript超時(shí)調(diào)用和間歇調(diào)用
JavaScript是單線程語(yǔ)言，但它允許通過(guò)設(shè)置超時(shí)值和間歇時(shí)間值來(lái)調(diào)度代碼在特定的時(shí)刻執(zhí)行。前者是在指定的時(shí)間過(guò)后執(zhí)行代碼，而后者則是每隔指定的時(shí)間就執(zhí)行一次代碼。
2015-08-08
JavaScript中閉包的詳解
本文主要介紹了JavaScript中閉包的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04
JS/CSS實(shí)現(xiàn)字符串單詞首字母大寫(xiě)功能
這篇文章主要介紹了JS/CSS實(shí)現(xiàn)字符串單詞首字母大寫(xiě)功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
JS數(shù)據(jù)類(lèi)型STRING使用實(shí)例解析
這篇文章主要介紹了JS數(shù)據(jù)類(lèi)型STRING使用實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
微信小程序如何同時(shí)獲取用戶信息和用戶手機(jī)號(hào)
小程序登錄是現(xiàn)在小程序里面很普遍的一個(gè)功能,因?yàn)楣俜教峁┑姆椒?可以一鍵獲取到用戶信息,一鍵拿到手機(jī)號(hào),這篇文章主要給大家介紹了關(guān)于微信小程序如何同時(shí)獲取用戶信息和用戶手機(jī)號(hào)的相關(guān)資料,需要的朋友可以參考下
2021-08-08