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)文章
javascript將json格式數(shù)組下載為excel表格的方法
下面小編就為大家分享一篇javascript將json格式數(shù)組下載為excel表格的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12JS+CSS實現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09Javascript中的this,bind和that使用實例
這篇文章主要介紹了Javascript中的this,bind和that使用實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12淺談JavaScript超時調(diào)用和間歇調(diào)用
JavaScript是單線程語言,但它允許通過設(shè)置超時值和間歇時間值來調(diào)度代碼在特定的時刻執(zhí)行。前者是在指定的時間過后執(zhí)行代碼,而后者則是每隔指定的時間就執(zhí)行一次代碼。2015-08-08