jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法
更新時(shí)間：2015年03月11日 12:26:56 作者：zhousir
這篇文章主要介紹了jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法,涉及jQuery操作鼠標(biāo)事件及dom元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法。分享給大家供大家參考。具體如下：
jQuery統(tǒng)計(jì)輸入文字個(gè)數(shù)可以使用在統(tǒng)計(jì)回復(fù)字?jǐn)?shù)，標(biāo)題字?jǐn)?shù)長(zhǎng)度提示，增加友好度提高用戶(hù)體驗(yàn)。代碼如下：
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery統(tǒng)計(jì)文字個(gè)數(shù)</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>
<span>新聞標(biāo)題:</span>
<span><input id="news_title" name="news_title" type="text" size="60" onkeyup="title_len();" onclick="title_len();" maxlength="80"/>
<span id="titlelen">0/80</span>
</li>
</ul>
</body>
<script language="javascript" type="text/javascript">
function title_len(){
var value = $('#news_title').val().length;
if(value == 80){
var string = "<span style=\"color:#FF0000\">"+value+"/80</span>";
}else{
var string = "<span style=\"color:#FF0000\">"+value+"</span>/80";
}
$('#titlelen').html(string);
}
</script>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery統(tǒng)計(jì)文字個(gè)數(shù)</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>
<span>新聞標(biāo)題:</span>
<span><input id="news_title" name="news_title" type="text" size="60" onkeyup="title_len();" onclick="title_len();" maxlength="80"/>
<span id="titlelen">0/80</span>
</li>
</ul>
</body>
<script language="javascript" type="text/javascript">
function title_len(){
var value = $('#news_title').val().length;
if(value == 80){
var string = "<span style=\"color:#FF0000\">"+value+"/80</span>";
}else{
var string = "<span style=\"color:#FF0000\">"+value+"</span>/80";
}
$('#titlelen').html(string);
}
</script>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jquery單行文字向上滾動(dòng)效果的實(shí)現(xiàn)代碼
- 基于jquery的文字向上跑動(dòng)類(lèi)似跑馬燈的效果
- 一個(gè)jquery實(shí)現(xiàn)的不錯(cuò)的多行文字圖片滾動(dòng)效果
- jquery實(shí)現(xiàn)多行文字圖片滾動(dòng)效果示例代碼
- 基于jQuery實(shí)現(xiàn)的文字按鈕表單特效整理
- jQuery實(shí)現(xiàn)行文字鏈接提示效果的方法
- jQuery實(shí)現(xiàn)3D文字特效的方法
- jQuery實(shí)現(xiàn)不斷閃爍文字的方法
- jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
- jQuery+css3實(shí)現(xiàn)文字跟隨鼠標(biāo)的上下抖動(dòng)
- jquery實(shí)現(xiàn)疊層3D文字特效代碼分享
相關(guān)文章
伸縮的導(dǎo)航有不少優(yōu)點(diǎn)的，可以在有限的空間里容下很多的內(nèi)容，下面有個(gè)不錯(cuò)的示例用到JQuery，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了jQuery圖片加載失敗替換默認(rèn)圖片方法匯總,運(yùn)用到的相關(guān)知識(shí)jquery的ready方法、$("img").error()、img的complete屬性、插件imagesLoaded、事件委托、事件捕獲和圖片預(yù)加載的方法等，需要的朋友可以參考下2017-11-11
本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語(yǔ)法和獲取簡(jiǎn)例，需要的朋友可以看下2016-11-11
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了眾多參數(shù)，如顯示動(dòng)畫(huà)持續(xù)時(shí)間、背景顏色、文本顏色、顯示位置、加載ajax內(nèi)容、回調(diào)函數(shù)等等。2015-05-05
jquery 簡(jiǎn)短幾句代碼實(shí)現(xiàn)給元素動(dòng)態(tài)添加及獲取提示信息
雖然是很基本的東西，但為什么很基本的方法就可以實(shí)現(xiàn)的東西有些人偏偏還要去追求復(fù)雜高深難懂的呢？這里只是交流而已2011-09-09
如果你不知道什么是jQuery autocomplete插件，請(qǐng)看圖。你可以測(cè)試一下本站的搜索。當(dāng)然也可以百度一下。2009-04-04
根據(jù)郵箱的域名跳轉(zhuǎn)到相應(yīng)的登錄頁(yè)面的代碼
其實(shí)主要是想記錄一下這種對(duì)象的用法，喜歡的朋友可以參考下2012-02-02
jquery事件與函數(shù)在使用中很頻繁，在本文為大家介紹下事件綁定及函數(shù)聲明和命名函數(shù)表達(dá)式，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jQuery插件擴(kuò)展操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery擴(kuò)展方法的定義與使用技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下2017-01-01
本章節(jié)主要介紹了jQuery在HTML中動(dòng)態(tài)插入節(jié)點(diǎn)的各種方法,制作成表格，方便大家對(duì)比學(xué)習(xí)，需要的朋友可以參考下2015-03-03