文本框的字数限制功能jquery插件

2016-02-19 14:40 18 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享文本框的字数限制功能jquery插件,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

打包下载

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)代码如下:
!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
pEnter your hobbies (50 characters)/p
textarea style="width:300px; height:150px" data-maxsize="50" data-output="status1" wrap="virtual"/textareabr /
div id="status1" style="width:300px;font-weight:bold;text-align:right"/divbr /
pEnter 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')
/

来源:http://www.tulaoshi.com/n/20160219/1607540.html

延伸阅读
标签: Web开发
做项目时自己写一段js给大家。关于文本限制字数的问题,在实际开发中经常用到;主要问题出现在对中文的限制,下面代码就解决关于限制字节数的校验问题;只要将此下代码保存到一个js文件中并引入到校验的页面中,便可使用!同时希望大家给与大力支持和宝贵意见,本人会在今后闲余之际,发表更多的好文章,谢谢!! /*  value: 值; ...
标签: Web开发
表单的文本框分为单行文本框和多行文本框,故名思义,单行文本框用于输入一些简短的信息,如:姓名、E_mail地址、口令等等;多行文本框用于输入内容较长的信息,如:用户意见、评论、留言等。只要你理解了表单的文本框参数的含义,制作接收信息的文本框是不难的,请看下面的例子。 一、一个单行文本框的例子 本例的源代码如下...
标签: 电脑入门
方法一、创建了文本框之后,然后在选择文本框,选择文本框点del键的是将文本框的内容给删除掉。需要将文本框一并删除掉的话,需要移动到文本框的框边缘,出现一个十字箭头的样式,然后点击,这样即可删除文本框了。 方法二、将文本框设置为无线条颜色。双击文本框,然后选择,将线条设置无颜色,这样虽然没有删除文本框,但是文本框看起来跟输...
标签: Web开发
一个Ajax文本框输入提示的例子,用asp实现: 前台文件 !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 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title文本框输入提示/title style ...
标签: 电脑入门
Word文档里面可以包含各种各种的对象,其中,有几种对象不是普通文字,比如图片、艺术字、文本框等,这些对象不是纯文本,在操作上,肯定与文本的操作有所不同! 下面,给大家介绍的这个问题是,Word里面的文本框无法删除。遇到文本框删不掉,如何才能删除呢? 针对该问题,原因出自两个方面,下面逐一为你道来。 一、文本框对象未选对 关于...

经验教程

652

收藏

92
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部