textarea限定字数提示效果
最近工作中要实现的一个效果是:在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限定字数提示效果的更多相关文章
- jquery插件:textarea的字数提示、textBox的文字提示
引用文件: <script src=”/TextTip/TextTip.js” type=”text/javascript”></script> 一.textarea的字 ...
- 仿校内textarea输入框字数限制效果
这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...
- js 实现textarea剩余字数统计
1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...
- 炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- [锋利的JQ]-超链接提示效果
关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...
- SweetAlert – 替代 Alert 的漂亮的提示效果
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...
- input/select/textarea标签的readonly效果实现
首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...
- JavaScript为input/textarea自定义hover,focus效果
<title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...
随机推荐
- Codeforces Round #324 (Div. 2) C. Marina and Vasya 贪心
C. Marina and Vasya Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/pr ...
- html中#include file的使用方法
有两个文件a.htm和b.htm,在同一文件夹下a.htm内容例如以下 <!-- #include file="b.htm" --> b.htm内容例如以下 今天:雨 ...
- [Bootstrap] 1. container & container-fluid
Container: 居中 <!DOCTYPE html> <html> <head> <title>Blasting Off With Bootstr ...
- UVA - 10883 Supermean
Description Problem F Supermean Time Limit: 2 second "I have not failed. I've just found 10,000 ...
- android130 android启动
Android的编译环境只支持Linux和Mac OS,google推荐使用64位操作系统, ### android启动 > #### 当引导程序启动Linux内核后,会加载各种驱动和数据结构, ...
- java_jdbc_可滚动结果集与分页
public static void create2(int i) { Connection conn = null; Statement st = null; ResultSet rs = null ...
- Apache的RewriteRule规则详细介绍
R[=code](force redirect) 强制外部重定向 (rkyW z强制在替代字符串加上http://thishost[:thisport]/前缀重定向到外部的URL.如果code不指定, ...
- XMemcached使用示例--转
Memcached 是一个高性能的分布式内存对象的key-value缓存系统,用于动态Web应用以减轻数据库负载,现在也有很多人将它作为内存式数据库在使用,memcached通过它的自定义协议与客户端 ...
- 如何使用VSTS做压力测试
1 前言 1.1 目的 本文档主要介绍如何在VSTS环境中进行LoadTest测试,给测试人员和初次使用者提供参考. 对该工具进行LoadTest测试的优劣进行简单的分析说明. 1.2 软件版本 本文 ...
- Java设计模式09:单例模式的强化(控制实例个数n)
1. 单例模式的本质: 控制实例数目(目的节约资源) 2. 单例模式体现的一些思想: (1)延迟装载(Lazy Load):懒汉式 (2)缓存:饿汉式 3. 单例模式的变形使用: 控制使用实例个数为3 ...