jQuery 类twitter的文本字数限制带提示效果插件

2016-02-19 13:10 1 1 收藏

下面是个简单易学的jQuery 类twitter的文本字数限制带提示效果插件教程，图老师小编详细图解介绍包你轻松学会，喜欢的朋友赶紧get起来吧！

【 tulaoshi.com - Web开发】

之前也介绍过一个类似效果的JQuery插件jQuery maxlength文本字数限制插件,不过这次的charcount部署更简单,而且有超出数字提示的功能.
简单的部署:

1.载入js:

代码如下：

script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/charCount.js"/script

2.Html结构:

代码如下：

form method="post" action=""
h2Default Usage/h2
div
label for="message"Type your message/label
textarea name="message1"/textarea
/div
h2Custom Usage/h2
div
label for="message"Another message (limited to 30, warning at 10)/label
textarea name="message2"/textarea
/div
/form

3.charCount插件设置:

代码如下：

script type="text/javascript"
$(document).ready(function(){
//default usage
$("#message1").charCount();
//custom usage
$("#message2").charCount({
allowed: 30,
warning: 10,
counterText: '剩余字数: '
});
});
/script

打包打包下载

来源:https://www.tulaoshi.com/n/20160219/1603163.html

上一篇： jquery 图片截取工具jquery.imagecropper.js
下一篇： java初学者常用开发工具介绍

看过《jQuery 类twitter的文本字数限制带提示效果插件》的人还看了以下文章更多>>

JQuery 表单中textarea字数限制实现代码

标签： Web开发

代码如下: $('#FashionStatement').val(''); var limitNum = 1000; var pattern = '还可以输入' + limitNum + '字'; $('#statementRowChk').html(pattern); $('#FashionStatement').keyup( function() { var remain = $(this).val().length; if (remain 1000) { pattern = $('字数超过限制，请适当删除部分内容'); } else { var...

Webjx收集jQuery图片切换效果插件

标签： Web开发

FullScreen Image-Gallery SupersizedGallery ImageRotator Galleria Content-Gallery Galleriffic EasySlider 看中文介绍的猛点此处： http://jsssc.cn/easy-slider-15-the-easiest-jquery-plugin-for-sliding/ ImageScroller ...

jQuery AnythingSlider滑动效果插件

标签： Web开发

打包下载 jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件，有些插件在本博客中已经有介绍，有些还没有，本文介绍的是：2009年度最佳 jQuery 插件—Anything...

基于jQuery的消息提示插件 DivAlert之旅（二）

标签： Web开发

改进的代码部分主要如下： 1、创建default.css文件: 代码代码如下: img { vertical-align:middle; } .jBg { position: absolute; top: 0; left: 0; z-index: 9999; background-color: #999; filter: alpha(opacity=70); opacity: 0.7; } .jWrap { position: absolute; border: 1px solid #cef; z-index: 1000...

jQuery插件实现css3效果

标签： Web开发

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果，但是目前支持css3的浏览器少之又少，往往了实现圆角效果要去写一堆代码，下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。 1.多重背景 #backgrounds-...

查看更多精彩>>