文本框的字数限制功能jquery插件_Javascript教程-查字典教程网
文本框的字数限制功能jquery插件
文本框的字数限制功能jquery插件
发布时间:2016-12-30 来源:查字典编辑
摘要:后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jqueryplugin,简单好用效果如下图复制代码代码如下:关于文本框的字数限制...

后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin,简单好用

效果如下图

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>关于文本框的字数限制功能</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="maxlength.js"></script>

</head>

<body>

<p>Enter your hobbies (<50 characters)</p>

<textarea data-maxsize="50" data-output="status1" wrap="virtual"></textarea><br />

<div id="status1"></div><br />

<p>Enter your postal code (<6 characters)</p>

<input type="text" name="T1" size="15" data-maxsize="6">

</body>

</html>

属性解释:

data-maxsize:该文本域能够接受的最大字数.(important)

data-output:如果想实时动态显示文本框里的字数,该属性设置显示字数的span或div的id.(字数显示的颜色会随着数量变化)

如果不修改它的源文件的话,加添了js引用后,你只需要给自己的text或者textarea加上data-maxsize属性就可以了。

关于动态设置最大值

使用setformfieldsize方法:

setformfieldsize($field, maxsize, outputfieldid)

属性解释:

$field:就是被限制的文本框的JQuery对象(参考Jquery文档).

maxsize:和data-maxsize一样,该文本域能够接受的最大字数.

outputfieldid:和data-output一样.

例子:

复制代码 代码如下:

<script type="text/javascript">

//jQuery(document).ready(function($){ //fire on DOM ready

setformfieldsize(jQuery('#comment'), 50, 'charsremain')

//});

</script>

在界面加载时执行.

演示代码下载http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类