JavaScript動態(tài)提示輸入框輸入字數(shù)的方法
更新時間：2015年07月27日 16:13:10 作者：挨踢騎術(shù)
這篇文章主要介紹了JavaScript動態(tài)提示輸入框輸入字數(shù)的方法,實例分析了javascript針對頁面元素的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JavaScript動態(tài)提示輸入框輸入字數(shù)的方法。分享給大家供大家參考。具體如下：
在QQ空間里有小紙條那么一個功能，隨著你在文本框中輸入多少字，上面會動態(tài)提示你“已經(jīng)輸入多少字”和“還可以輸入多少字”，覺得挺好的，所以自己也試著做做，呵呵。
開始，我想很多人第一感覺就是通過js的 onkeydown或者onkeyup來做，中發(fā)現(xiàn)還可以用focus + setInterval() +blur來達到我們需要的效果，于是很快的我利用這種方法自己粗糙的寫了一下，達到了預(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)提示輸入框輸入字數(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限制字數(shù)的輸入框的那些事
- JavaScript輸入框字數(shù)實時統(tǒng)計更新
- JavaScript中統(tǒng)計Textarea字數(shù)并提示還能輸入的字符
- Javascript實現(xiàn)真實字符串剩余字數(shù)提示的實例代碼
- .NET+JS對用戶輸入內(nèi)容進行字數(shù)提示功能的實例代碼
- 利用Angularjs和原生JS分別實現(xiàn)動態(tài)效果的輸入框
- Angularjs中的驗證input輸入框只能輸入數(shù)字和小數(shù)點的寫法（推薦）
- AngularJS實現(xiàn)的輸入框字數(shù)限制提醒功能示例
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript在web自動化測試中的作用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
本篇文章主要是對js中浮點型運算BUG的解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
本文不再介紹，大家根據(jù)自己需要選擇其中的一種即可，總之簡約最美的，能減少代碼就減少代碼，能不調(diào)用的就別調(diào)用，要不是天緣博客的文章都是牛長也不會添加這個功能2012-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
JavaScript設(shè)計模式之性能優(yōu)化模式享元模式
這篇文章主要介紹了JavaScript設(shè)計模式之性能優(yōu)化模式享元模式，享元設(shè)計模式是用于性能優(yōu)化的模式，這種設(shè)計模式的核心在于可以共享技術(shù)并支持對大量細分過后的對象進行調(diào)整，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-06-06
有時我們會有這樣的需求：讓圖片顯示在固定大小的區(qū)域。如果不考慮 IE6 完全可以使用 css 的 max-width 限制寬度自動按比例縮小顯示，但是這樣有個問題，就是如果按比例縮小后，圖片高度不夠，那么就很難看了2014-07-07
javascript實現(xiàn)框架高度隨內(nèi)容改變的方法
這篇文章主要介紹了javascript實現(xiàn)框架高度隨內(nèi)容改變的方法,實例分析了通過父頁面及內(nèi)容改變框架高度兩種實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
javascript實現(xiàn)移動的模態(tài)框效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動的模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript中使用typeof運算符需要注意的幾個坑
這篇文章主要介紹了JavaScript中使用typeof運算符需要注意的幾個坑,本文總結(jié)了4個使用typeof運算符要注意的問題,需要的朋友可以參考下2014-11-11
HTTP Response Splitting 攻擊主要說明的是兩個問題2008-12-12