基于jquery的inputlimiter 實(shí)現(xiàn)字?jǐn)?shù)限制功能

更新時(shí)間：2010年05月30日 02:29:07 作者：

因客戶要求區(qū)分全角跟半角，所以在jquery.inputlimiter.js插件上還做了些小改動(dòng)。

看下效果圖：

源代碼:

復(fù)制代碼代碼如下:

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Input Limiter Demo</title> 
<link rel="stylesheet" type="text/css" href="jquery.inputlimiter.1.0.css" /> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.inputlimiter.1.2.js"></script> 
<style type="text/css"> 
body { 
font-family: verdana; 
} 
#limitingtext { 
color: #333; 
font-size: 90%; 
} 
</style> 
<script type="text/javascript"> 
function create_xmlDoc(){ 
var xmlDoc = null; 
try //Internet Explorer 
{ 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
} 
catch(e) 
{ 
try //Firefox, Mozilla, Opera, etc. 
{ 
xmlDoc=document.implementation.createDocument("","",null); 
} 
catch(e) 
{ 
alert(e.message); 
return; 
} 
} 
return xmlDoc; 
} 

$(document).ready(function() { 
var xmlDoc = create_xmlDoc(); 
xmlDoc.async=false; 
xmlDoc.load("test.xml"); 
var x=xmlDoc.getElementsByTagName("channel"); 
for( var i=0; i<x.length; i++ ){ 
if(x[i].getAttribute("CID") == '1'){ 
num = x[i].childNodes[0].getAttribute("fNum"); 
strfield = x[i].childNodes[0].getAttribute("FID"); 
//為每個(gè)自定義字段綁定字?jǐn)?shù)限制功能 
$("#"+strfield).inputlimiter({ 
limit: num, 
remText: '你還能輸入 %n 個(gè)字', 
remFullText: '你輸入的字?jǐn)?shù)已超過(guò)限制數(shù)值', 
limitText: '' 
}); 
//$("#hidNum").val(num); 
} 
} 

$("#SendLimiter").click(function(){ 
if($("#Num").val().length==0){ 
alert("限制字?jǐn)?shù)不能為空！"); 
return; 
} 
if(isdigit($("#Num").val())==0){ 
alert("請(qǐng)輸入數(shù)字!"); 
return; 
} 
$.ajax({ 
url:'SaveLimiter.asp', //后臺(tái)處理程序 
type:'Post', //數(shù)據(jù)發(fā)送方式 
data:"Num=" + $("#Num").val() + "&ChannelID=1"+"&Field="+$("#sel").val(), //要傳遞的數(shù)據(jù) 
success:update_page, //回傳函數(shù)(這里是函數(shù)名) 
error:errorInfo 
}); 
}); 

//回傳函數(shù)實(shí)體，參數(shù)為XMLhttpRequest.responseText 
function update_page (data) { 
//alert(data); 
alert("提交成功！"); 
} 

function errorInfo(data){ 
alert("提交失??！"+data.responseText); 
} 

//判斷輸入值是否是數(shù)字 
function isdigit(s){ 
var r,re; 
re = /\d*/i; //\d表示數(shù)字,*表示匹配多個(gè)數(shù)字 
r = s.match(re); 
return (r==s)?1:0; 
} 
}); 
</script> 
</head> 
<body> 
<h1>字?jǐn)?shù)限制功能列子</h1> 
<form > 
<fieldset> 
<legend>字?jǐn)?shù)限制</legend> 
標(biāo)題：<input type="text" id="TITLE" size="50" style="border: 1px solid gray"/><br /> 
自定義字段1：<input type="text" id="ceshi1" size="50" style="border: 1px solid gray"/><br /> 
自定義字段2：<input type="text" id="ceshi2" size="50" style="border: 1px solid gray"/><br /> 
</label><br /><br /> 
<label>字?jǐn)?shù)限制設(shè)置： 
<select id="sel"> 
<option value="TITLE">標(biāo)題</option> 
<option value="ceshi1">自定義字段1</option> 
<option value="ceshi2">自定義字段2</option> 
</select> 
<input type="text" class="cmsField" style="width:80px" id="Num"><input type="button" value="提交" id="SendLimiter"> 
</fieldset> 

</form> 
</body> 
</html> 

這里的限制字?jǐn)?shù)是動(dòng)態(tài)設(shè)置的，所以配置了一個(gè)ASP頁(yè)面和一個(gè)XML文件

ASP

復(fù)制代碼代碼如下:

 
<% 
num = Trim(Request("Num")) '字?jǐn)?shù)限制值 
channelid = Trim(Request("ChannelID")) '頻道ID 
sfield = Trim(Request("Field")) '需設(shè)定的字?jǐn)?shù)限制值的字段 

set objDom = server.CreateObject("MicroSoft.XMLDom") 
objDom.load(Server.MapPath("test.xml")) 
Set objNode = objDom.documentElement 
'節(jié)點(diǎn)長(zhǎng)度 
newint=objNode.ChildNodes.length-1 
for i=0 To newint 
'節(jié)點(diǎn)id屬性 
set objarr=objNode.ChildNodes.item(i) 
if ( objarr.Attributes.item(1).Text = channelid) then 
if( objarr.ChildNodes.item(0).Attributes.item(1).Text = sfield ) then 
'直接定位到節(jié)點(diǎn)的ID下屬性的內(nèi)容 
objDom.getElementsByTagName("channel").item(i).childNodes.item(0).Attributes.item(2).Text = num 
exit for 
end if 
end if 
set objarr = Nothing 
next 
objDom.save(Server.MapPath("test.xml")) 
set objNode = Nothing 
Set objDom = Nothing 
%> 

XML

復(fù)制代碼代碼如下:

 
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<TurboCMSXML> 
<channel cName="測(cè)試頻道1" CID="1"> 
<Field fName="標(biāo)題" FID="TITLE" fNum="20"/> 
</channel> 
<channel cName="測(cè)試頻道1" CID="1"> 
<Field fName="自定義字段1" FID="ceshi1" fNum="20"/> 
</channel> 
<channel cName="測(cè)試頻道1" CID="1"> 
<Field fName="自定義字段2" FID="ceshi2" fNum="200"/> 
</channel> 
<channel cName="首頁(yè)2" CID="2"> 
<Field fName="測(cè)試2" FID="ceshi2" fNum="20"/> 
</channel> 
<channel cName="首頁(yè)3" CID="3"> 
<Field fName="測(cè)試3" FID="ceshi3" fNum="10"/> 
</channel> 
<channel cName="首頁(yè)4" CID="4"> 
<Field fName="測(cè)試4" FID="ceshi4" fNum="20"/> 
</channel> 
</TurboCMSXML> 