<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>insert title</title>
<style type="text/css">
</style>
</head>
<body>
<div class="area">
<p>还可以输入<b class="num">140</b>字</p>
<textarea class="chackTextarea"></textarea>
</div>
<div class="area">
<p>还可以输入<b class="num">140</b>字</p>
<textarea class="chackTextarea"></textarea>
</div>
<div class="area">
<p>还可以输入<b class="num">140</b>字</p>
<textarea class="chackTextarea"></textarea>
</div>
<div class="area">
<p>还可以输入<b class="num">140</b>字</p>
<textarea class="chackTextarea"></textarea>
</div>
<script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var txtobj={
divName:"area", //外层容器的class
textareaName:"chackTextarea", //textarea的class
numName:"num", //数字的class
num:140 //数字的最大数目
}
var textareaFn=function(){
//定义变量
var $onthis;//指向当前
var $divname=txtobj.divName; //外层容器的class
var $textareaName=txtobj.textareaName; //textarea的class
var $numName=txtobj.numName; //数字的class
var $num=txtobj.num; //数字的最大数目
function isChinese(str){  //判断是不是中文
var reCh=/[u00-uff]/;
return !reCh.test(str);
}
function numChange(){
var strlen=0; //初始定义长度为0
var txtval = $.trim($onthis.val());
for(var i=0;i<txtval.length;i++){
if(isChinese(txtval.charAt(i))==true){
strlen=strlen+2;//中文为2个字符
}else{
strlen=strlen+1;//英文一个字符
}
}
strlen=Math.ceil(strlen/2);//中英文相加除2取整数
if($num-strlen<0){
$par.html("超出 <b style='color:red;font-weight:lighter' class="+$numName+">"+Math.abs($num-strlen)+"</b> 字"); //超出的样式
}
else{
$par.html("还可以输入 <b class="+$numName+">"+($num-strlen)+"</b> 字"); //正常时候
}
$b.html($num-strlen);
}
$("."+$textareaName).live("focus",function(){
$b=$(this).parents("."+$divname).find("."+$numName); //获取当前的数字
$par=$b.parent();
$onthis=$(this); //获取当前的textarea
var setNum=setInterval(numChange,500);
});
}
textareaFn();
</script>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>

http://www.veryhuo.com/a/view/43720.html

文本框textarea实时提示还可以输入多少文字的更多相关文章

  1. JS控制文本框textarea输入字数限制的方法

    <html> <head runat="server"> <title></title> <script type=" ...

  2. 纯 JS 设置文本框的默认提示

    HTML5 中有个新特性叫 placeholder,一般用它来描述输入字段的预期值,适用于 text.search.password 等类型的 input 以及 textarea.示例如下: < ...

  3. .Net 文本框实现内容提示(仿Google、Baidu)

    原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...

  4. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  5. CodeMirror编辑器文本框Textarea代码高亮插件，CodeMirror的简单实用例子

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  6. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  7. 在chrome下的文本框sendkeys，提示element can't focus--解决方法

    在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...

  8. js动态显示可输入字数并提示还可以输入的字数

    动态显示可输入的字数提示还可以输入的字数. 代码: <input name="title" type="text" size="50" ...

  9. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

随机推荐

  1. 开启mysql sql追踪

    my.ini [mysqld] # The next three options are mutually exclusive to SERVER_PORT below. # skip-network ...

  2. Android -- Looper.prepare()和Looper.loop() —深入版

    Android中的Looper类,是用来封装消息循环和消息队列的一个类,用于在android线程中进行消息处理.handler其实可以看做是一个工具类,用来向消息队列中插入消息的. (1) Loope ...

  3. Linux系统 ssh图形界面远程

    远程Linux系统有图形界面 1.下载xming 并安装启动 2.通过putty登陆虚拟机 3.输入gnome-session

  4. python_如何建立包

    步骤: (1)包的名称为drawing (2)drawing中建立模块color和shape 视图: 备注: (1) E:/python_script/已经加入到系统变量path中 (2) 建立包时, ...

  5. 一次数据库hang住的分析过程

    现象: 普通用户和sysdba都无法登陆,业务中断 分析过程: 1.先做hanganalyze和systemstate dump $sqlplus -prelim "/as sysdba&q ...

  6. 对ASP.NET Cookie的一些新的认识

    做用户登录,我一直用form验证的方式.有时候,为了节省时间,用户希望用户名输入框能够记住用户名,省得下次重新输入.这个时候光用form验证是不行的,因为form验证的话,用户一退出系统就失效了,所以 ...

  7. MVC1

  8. 比较Date时间先后

    if ([firstDetailSelect compare:secondDetailSelect] == NSOrderedDescending) { [MBProgressHUD showErro ...

  9. 3D照片放大展示窗口

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  10. 树形DP +01背包（HDU 1011）

    题意:有n个房间,有n-1条道路连接着n个房间,每个房间都有若干个野怪和一定的能量值,有m个士兵从1房间入口进去,到达每个房间必须要留下若干士兵杀死所有的野怪,然后其他人继续走,(一个士兵可以杀死20 ...