JavaScript動態(tài)提示輸入框輸入字?jǐn)?shù)的方法
本文實例講述了JavaScript動態(tài)提示輸入框輸入字?jǐn)?shù)的方法。分享給大家供大家參考。具體如下:
在QQ空間里有小紙條那么一個功能,隨著你在文本框中輸入多少字,上面會動態(tài)提示你“已經(jīng)輸入多少字”和“還可以輸入多少字”,覺得挺好的,所以自己也試著做做,呵呵。
開始,我想很多人第一感覺就是通過js的 onkeydown或者onkeyup來做,中發(fā)現(xiàn)還可以用focus + setInterval() +blur來達(dá)到我們需要的效果,于是很快的我利用這種方法自己粗糙的寫了一下,達(dá)到了預(yù)期的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>IT技術(shù)網(wǎng)-JavaScript動態(tài)提示輸入框輸入字?jǐn)?shù)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function $(obj){ return document.getElementById(obj); } function sp(){ var tex = $('te').value; var nun =tex.length; var spa = $('span'); spa.innerHTML = nun; } </script> </head> <body> 你已經(jīng)輸入了<span id='span'>0</span>字 <input value="" id="te" type="text" onfocus="ss=setInterval(sp,600)" onblur="clearInterval(ss)"/> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
- 關(guān)于JavaScript限制字?jǐn)?shù)的輸入框的那些事
- JavaScript輸入框字?jǐn)?shù)實時統(tǒng)計更新
- JavaScript中統(tǒng)計Textarea字?jǐn)?shù)并提示還能輸入的字符
- Javascript實現(xiàn)真實字符串剩余字?jǐn)?shù)提示的實例代碼
- .NET+JS對用戶輸入內(nèi)容進(jìn)行字?jǐn)?shù)提示功能的實例代碼
- 利用Angularjs和原生JS分別實現(xiàn)動態(tài)效果的輸入框
- Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法(推薦)
- AngularJS實現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能示例
相關(guān)文章
layui數(shù)據(jù)表格重載實現(xiàn)往后臺傳參
今天小編就為大家分享一篇layui數(shù)據(jù)表格重載實現(xiàn)往后臺傳參,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11JavaScript雙向鏈表實現(xiàn)LRU緩存算法的示例代碼
本文主要介紹了JavaScript雙向鏈表實現(xiàn)LRU緩存算法的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01JavaScript實現(xiàn)網(wǎng)頁tab欄效果制作
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)網(wǎng)頁tab欄效果制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11js實現(xiàn)簡單的省市縣三級聯(lián)動效果實例
這篇文章主要介紹了js實現(xiàn)簡單的省市縣三級聯(lián)動效果,以完整實例形式分析了JavaScript實現(xiàn)省市縣三級聯(lián)動效果的具體步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-02-02