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


Posted in Javascript onMay 30, 2010

看下效果图:
基于jquery的inputlimiter 实现字数限制功能
源代码:

<!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>
Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 #Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 #Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 #Javascript
Javascript 设计模式(二) 闭包
May 26 #Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 #Javascript
js escape,unescape解决中文乱码问题的方法
May 26 #Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 #Javascript
You might like
YB217、YB235、YB400浅听
2021/03/02 无线电
深入PHP数据加密详解
2013/06/18 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
Python函数学习笔记
2008/10/07 Python
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python语法快速入门指南
2015/10/12 Python
django Serializer序列化使用方法详解
2018/10/16 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
大学生职业生涯规划书
2014/03/14 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
六一亲子活动总结
2014/07/01 职场文书
解除劳动合同证明书
2014/09/26 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
导游词之湖北武当山
2019/09/23 职场文书
手残删除python之后的补救方法
2021/06/26 Python
PyTorch中permute的使用方法
2022/04/26 Python