最近工作中要实现的一个效果是:在textarea中输入字符会提示剩余多少字符可输入。于是马不停蹄的开始查阅资料。

  HTML代码:

<table>
<colgroup>
<col style="width:100px;" />
<col />
</colgroup>
<tr>
<td>退货说明:<td>
<td>
<textarea class="js-show-change" style="width:400px;height:100px;resize:none;"></textarea>  //resize属性用于禁止改变文本域的大小
<p>还可以输入<i class="count">200</i>个字</p>
<p id="showMsg"></p>
</td>
</tr>
</table>

  jQuery代码:

changeLength = function(obj,num){
$(obj).on("keyup",function(){
var len = $(obj).val();
var subLength = num - len.length;
if(len.length >= num){
$(obj).siblings(".js-show-length").find(".count").text(0);
var count = $(".count").val(0);
if (count) {
$("#showMsg").html("您输入的字数已经达到上限,无法继续输入了。");
$(obj).val(len.substr(0,num));  //输入字数限制
}
}else{
$(obj).siblings(".js-show-length").find(".count").text(subLength);
       $("#showMsg").html("");
}
})
}
changeLength(".js-change-length",200);

  原文:http://www.w3cfuns.com/notes/14290/5a6b78b3893700055f36b48b44ccb62b.html

textarea限定字数提示效果的更多相关文章

  1. jquery插件:textarea的字数提示、textBox的文字提示

    引用文件:    <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...

  2. 仿校内textarea输入框字数限制效果

    这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...

  3. js 实现textarea剩余字数统计

    1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...

  4. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  5. Fort.js – 时尚、现代的表单填写进度提示效果

    Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...

  6. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  7. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

  8. input/select/textarea标签的readonly效果实现

    首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...

  9. JavaScript为input/textarea自定义hover,focus效果

    <title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...

随机推荐

  1. Codeforces Round #321 (Div. 2) C. Kefa and Park dfs

    C. Kefa and Park Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/probl ...

  2. POJ 3080 Blue Jeans (KMP)

    求出公共子序列  要求最长  字典序最小 枚举第一串的所有子串   然后对每一个串做KMP.找到目标子串 学会了   strncpy函数的使用   我已可入灵魂 #include <iostre ...

  3. httpclient模拟浏览器訪问站点

    HttpClient 是 Apache Jakarta Common 下的子项目.能够用来提供高效的.最新的.功能丰富的支持 HTTP 协议的client编程工具包.而且它支持 HTTP 协议最新的版 ...

  4. SAP交货单过账自动生产采购订单、采购订单自动收货入库

    公司间需要买卖操作,由于发货和收货都是同一批人在操作,为了减少业务人员的工作量,提高工作效率,特实现以上功能 1.增强实现:增强点为交货单过账成功时触发,在提交前触发,如果遇到不可预知问题,可能造成数 ...

  5. 解决content is not allowed in prolog问题

    将xml文档用notepad++以UTF-8无BOM格式编码保存便可以了

  6. PowerDesigner 根据NAME属性自动生成表和列注释(不用写脚本)

    PowerDesigner 11 menu: [Database]->[Database Generation] tab: [Tables & Views]->check tabl ...

  7. Linux基础(一)

    一.安装linux系统可以用的5种方法 1.光盘 2.硬盘 3.NFS 映像 4.FTP 5.HTTP 硬盘安装分两种情况: A.是从Win系统上安装 B.是从别的Linux启动安装 这里介绍大多数人 ...

  8. nginx笔记---http配置

    1.三个逻辑区段 http:该区段嵌入配置文件的根部,在这个区段中允许定义指令和嵌入http相关模块.他包含了一个或多个server区段,他也能够使全局配置生效. server:这个区段建立了一个站点 ...

  9. [转]重新分配内置存储空间 android手机

    本文转自:http://www.in189.com/thread-815721-1-1.html 鉴于有些同学遇到问题了,毕竟步骤繁琐,可能中间会出错,因此推荐用26L       338944    ...

  10. 关于Git里程碑

    里程碑即Tag,是人为对提交进行的命名.这和Git的ID是否太长无关.使用任何数字版本号无论长短, 都没有使用一个直观的表意的字符串来的方便.例如:用里程碑名称"v2.1"对应软件 ...