脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → inputlimiter 字数限制

基于jquery的inputlimiter 实现字数限制功能

 更新时间：2010年05月30日 02:29:07   作者：  
因客户要求区分全角跟半角，所以在jquery.inputlimiter.js插件上还做了些小改动。
看下效果图：

源代码:
复制代码 代码如下:

<!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");
//为每个自定义字段绑定字数限制功能
$("#"+strfield).inputlimiter({
limit: num,
remText: '你还能输入 %n 个字',
remFullText: '你输入的字数已超过限制数值',
limitText: ''
});
//$("#hidNum").val(num);
}
}

$("#SendLimiter").click(function(){
if($("#Num").val().length==0){
alert("限制字数不能为空！");
return;
}
if(isdigit($("#Num").val())==0){
alert("请输入数字!");
return;
}
$.ajax({
url:'SaveLimiter.asp', //后台处理程序
type:'Post', //数据发送方式
data:"Num=" + $("#Num").val() + "&ChannelID=1"+"&Field="+$("#sel").val(), //要传递的数据
success:update_page, //回传函数(这里是函数名)
error:errorInfo
});
});

//回传函数实体，参数为XMLhttpRequest.responseText
function update_page (data) {
//alert(data);
alert("提交成功！");
}

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

//判断输入值是否是数字
function isdigit(s){
var r,re;
re = /\d*/i; //\d表示数字,*表示匹配多个数字
r = s.match(re);
return (r==s)?1:0;
}
});
</script>
</head>
<body>
<h1>字数限制功能列子</h1>
<form >
<fieldset>
<legend>字数限制</legend>
标题：<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>字数限制设置：
<select id="sel">
<option value="TITLE">标题</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>

这里的限制字数是动态设置的，所以配置了一个ASP页面和一个XML文件

ASP
复制代码 代码如下:

<%
num = Trim(Request("Num")) '字数限制值
channelid = Trim(Request("ChannelID")) '频道ID
sfield = Trim(Request("Field")) '需设定的字数限制值的字段

set objDom = server.CreateObject("MicroSoft.XMLDom")
objDom.load(Server.MapPath("test.xml"))
Set objNode = objDom.documentElement
'节点长度
newint=objNode.ChildNodes.length-1
for i=0 To newint
'节点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
'直接定位到节点的ID下属性的内容
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
复制代码 代码如下:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<TurboCMSXML>
<channel cName="测试频道1" CID="1">
<Field fName="标题" FID="TITLE" fNum="20"/>
</channel>
<channel cName="测试频道1" CID="1">
<Field fName="自定义字段1" FID="ceshi1" fNum="20"/>
</channel>
<channel cName="测试频道1" CID="1">
<Field fName="自定义字段2" FID="ceshi2" fNum="200"/>
</channel>
<channel cName="首页2" CID="2">
<Field fName="测试2" FID="ceshi2" fNum="20"/>
</channel>
<channel cName="首页3" CID="3">
<Field fName="测试3" FID="ceshi3" fNum="10"/>
</channel>
<channel cName="首页4" CID="4">
<Field fName="测试4" FID="ceshi4" fNum="20"/>
</channel>
</TurboCMSXML>
您可能感兴趣的文章:

相关文章

  • Jquery 分页插件之Jquery Pagination

    Jquery 分页插件之Jquery Pagination

    实用jQuery分页特效插件jquery.pagination.js，基于jQuery实现，本文给大家分享jquery分页插件之jquery pagination，需要的朋友可以参考下
    2015-08-08
  • jquery遍历checkbox介绍

    jquery遍历checkbox介绍

    这篇文章主要是对jquery遍历checkbox进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jQuery判断数组是否包含了指定的元素

    jQuery判断数组是否包含了指定的元素

    这篇文章主要介绍了jQuery判断数组是否包含了指定的元素的方法,需要的朋友可以参考下
    2015-03-03
  • jQuery插件 tabBox实现代码

    jQuery插件 tabBox实现代码

    最近对js以及jq产生了浓厚的兴趣，看到jq有很多很好用的插件，功能各异，包括webUI,jqGrid等等。心里萌发了制作属于自己的jq插件的想法。
    2010-02-02
  • 基于JQuery的简单实现折叠菜单代码

    基于JQuery的简单实现折叠菜单代码

    利用JQUERY简单的实现功能菜单的折叠效果。本人初学，写后台稍多一点，很少写前台的效果。还请大虾们多多指教。
    2010-09-09
  • 用jquery和json从后台获得数据集的代码

    用jquery和json从后台获得数据集的代码

    最近正在用ajax无刷新做网站，发现数据很好传输，但是数据集不知道怎么获得，于是，上网查了一些资料来传输数据，现在和大家分享一下，不知道的童鞋可以和我一起学习，知道的请指点一二。我选择的方法是用json 来获取数据集
    2011-11-11
  • jQuery 第二课 操作包装集元素代码

    jQuery 第二课 操作包装集元素代码

    上文介绍了利用$函数筛选页面上的元素和替代onload事件。$函数还有一个作用，当它的参数是一个HTML片段的时候，它返回的是包含这个HTML元素的包装集。
    2010-03-03
  • 细说浏览器特性检测(2)-通用事件检测

    细说浏览器特性检测(2)-通用事件检测

    在上一篇中介绍了jQuery1.4版本新增的几个浏览器特性检测方案和具体的目的，本文将以事件为中心，介绍一个较为完整、通用的事件检测方案。
    2010-11-11
  • jQuery移除元素自动解绑事件实现思路及代码

    jQuery移除元素自动解绑事件实现思路及代码

    用jQuery将元素移除的基本方法常用的有三个，一个是remove()方法，一个是html()方法，一个是empty()方法
    2014-05-05
  • jquery+CSS实现的水平布局多级网页菜单效果

    jquery+CSS实现的水平布局多级网页菜单效果

    这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08

最新评论