如何限制textarea文本框的输入字数
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>如何限制文本框的输入长度</title>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("textarea[maxlength]").keyup(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10);
if(max>0){
if(area.val().length>max){
area.val(area.val().substr(0,max));
}
}
})
$("textarea[maxlength]").blur(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10);
if(max>0){
if(area.val().length>max){
area.val(area.val().substr(0,max));
}
}
})
});
</script>
</head>
<body>
<textarea maxlength="10"></textarea>
</body>
</html>
一.实现原理:
当 用键盘输入的时候，通过为keyup事件绑定事件处理函数，然后通过此函数判断当键盘按键弹起时当前文本框的文本长度是否超出了指定值，如果超出举截取， 否则保持原长度。当使用复制黏贴的时候，通过判断当文本框失去焦点时文本框的文本长度是否超出指定值，入股超出就自动截取。
二.代码注释:
1.$(function(){ }，文档结构完全加载完毕再去执行函数中的代码。
2.$("textarea[maxlength]").keyup(function(){}，为具有maxlength属性的textarea文本框注册keyup事件处理函数。
3.var area=$(this)，将当前对象转换成jquery对象。
4.var max=parseInt(area.attr("maxlength"),10)，获取输入长度的最大值。可以参阅JavaScript的parseInt()函数一章节。
5.area.val(area.val().substr(0,max))，截取字符串，
如何限制textarea文本框的输入字数的更多相关文章
- Jquery实现 TextArea 文本框根据输入内容自动适应高度
原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...
- html5 textarea 文本框根据输入内容自适应高度
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- tableView的footerView下面的颜色修改、限制文本框的输入字数
- JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)
一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...
- jQuery实现限制input框 textarea文本框输入字符数量的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 限制文本框只能输入数字或浮点数的JS脚步
1.oninput,onpropertychange,onchange的用法 l onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本 ...
- replace限制文本框只能输入数字，数字和字母等的正则表达式
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...
- js正则表达式限制文本框只能输入数字,小数点,英文字母
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...
随机推荐
- 最大化 AIX 上的 Java 性能，第 5 部分: 参考资料和结论
http://www.ibm.com/developerworks/cn/aix/library/es-Javaperf/es-Javaperf5.html 最大化 AIX 上的 Java 性能,第 ...
- noip2011普及组——统计单词数
统计单词数 时间限制:1 s 内存限制:128MB [问题描述]一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数.现在,请你编程实 ...
- CI框架3.0关于session的设置改动及存数据库的使用方法
Session的设置跟之前有点不一样 我们来看看2.0版本中的设置是什么样子的: $config['sess_cookie_name']= 'test_session'; $config['sess_ ...
- TKinter的常用组件
python提供了多个图形开发界面的库,几个常用Python GUI库如下: Tkinter: Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.T ...
- 关于ttserver, mongodb, couchbase. ssdb ,tair, leveldb的一点使用体验
2年前使用的ttserver,性能很高,支持分布式,但稳定性不足,当存储容量达到亿级的时间经常会出现无法插入的情况,而且不知道是什么原因造成的错误,重启后也无济于事,只好重启开新库. 单库写入性能 2 ...
- Hive(二):windows hive ODBC 安装
针对Windows 32位和64位的系统对应有多个版本的 Hive ODBC Connector, 在安装的过程中,版本必须完全匹配(即:32位的 connector 只能在32位的系统运行,64位的 ...
- HTML页面上获取鼠标的位置（备忘）
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- PHP开发框架--CodeIgniter(CI)使用总结
在开发的时候框架是十分重要的,目前有很多框架,WPF中比较出名的MVVM等,这些都是用来组织开发文件的,就是把一个应用分开来写.下面总结一下CI框架的用法. CI框架是基于MVC的,分别是 1.Mod ...
- 关于css中列表（ul ol）存在默认间距的问题
一.总结: 有时候我们要给列表(ul ol 本身就是属于块级元素)的上表框或下边框设置颜色,如下: 但是在给内联块级元素(inline-block)的上表框或下边框设置颜色的时候,就没有这么简单: 在 ...
- 如何解决WebkitBrowser使用出错“Failed to initialize activation context”
本文转载自:http://www.cnblogs.com/supjia/p/4695671.html 本篇文章主要介绍了"如何解决WebkitBrowser使用出错“Failed to in ...