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 ...
随机推荐
- git 回退和删除操作
今天不小心把分支的commit提交到master上了.衰 主要通过下面几个命令解决了,很简单记录一下. git reset –hard 回退到某一个版本git push origin :xxxx ...
- Codeforces Round #200 (Div. 1) B. Alternating Current 栈
B. Alternating Current Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343 ...
- HDU 5475 An easy problem 线段树
An easy problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pi ...
- 设计模式之十三:适配器模式(Adapter)
适配器模式: 将一个类的接口转换成另外一个期望的类的接口.适配器同意接口互不兼容的类一起工作. Convert the interface of a class into another interf ...
- Swipe2.1更新——移动Web内容滑块
Swipe JS 是一个轻量级(3.7 kb) mobile slider,支持 1:1 触摸移动(基于精确的触摸位置的内容滑动). 但是我使用一段时间后发现两个bug,所以在官方2.0(官网http ...
- android129 zhihuibeijing 聊天机器人
上屏幕界面activity_main.xml: 语音识别界面 <LinearLayout xmlns:android="http://schemas.android.com/apk/r ...
- 基础:c++中引用与java中的引用
using namespace std; class Point { public: double x; double y; Point(){} void setPoint(double x,doub ...
- php验证码制作
目标: 使用php生成验证码 成品: 逻辑代码: authcode.php <?php header("Content-type:image/png"); session_s ...
- 解决myeclipse过期问题
一般myeclise使用期限为30天,超过之后,会频繁的提醒你,购买软件,很讨厌,有个这个小工具,,以后再也不怕啦!!! 使用方法: 1:将这个类导入到myeclipse包中 2:运行main方法,提 ...
- Bootloader简介
来介绍一下Bootloader,在专用的嵌入式开发板上运行GNU/Linux 系统已经变得越来越流行.一个嵌入式Linux 系统从软件的角度看通常可以分为四个层次: 1.引导加载程序.包括固化在固件( ...