<!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. Q promise的使用

    虽然es6已经出现一段时间了,但是对于没有使用es6的node.js的时候,仍要解决回调金字塔,因此Q还是很有必要的.

  2. [转载]ArcGIS Engine 中的多线程使用

    ArcGIS Engine 中的多线程使用 原文链接 http://anshien.blog.163.com/blog/static/169966308201082441114173/   一直都想写 ...

  3. python判断类型

    方法 isinstance(obj, type) 示例 >>> print isinstance(, int) True >>> print isinstance( ...

  4. javaScirpt学习之事件

    一.事件的添加和删除 不同浏览器,不同DOM级别,添加和删除事件的方法也不同,具体可以参见后面的EventUtil元素. 二.事件对象 在事件处理程序中,浏览器会为之传入一个event对象,该对象的常 ...

  5. SQL 的简单命令（增删改查）

    数据库操作的资料: 链接: https://pan.baidu.com/s/1dFl3q6X 密码: nvy7-- 增:insert into 表名 (列名) values (值) ,'dew') - ...

  6. 网卡流量查看软件bmon

    bmon 时 linux下最常用的查看网络带宽的工具,debian下直接进行安装即可 apt-get install bmon redhat下可以在这里寻找到合适版本的rpm包,安装完毕后执行bmon ...

  7. 手动purge优化器的统计信息与AWR快照，减少对sysaux表空间的占用

    1.运行以下脚本,计算当前优化器统计信息和AWR快照表占用sysaux的空间 SQL> conn / as sysdba SQL> @?/rdbms/admin/awrinfo.sql 2 ...

  8. JAVA-封装-静态属性

    1.使用 1.static 2.用来修饰属性.方法.内部类.代码块 3.称为类属性,静态属性,类方法,静态方法 3.不需要实例化,直接用类名或静态成员名调用 2.特点 1.静态属性对于类的所有实例是共 ...

  9. C++Builder 笔记

    1.界面窗口如何不显示标题栏? 在Form属性栏里面把BorderStyle的值设为None 2.wchar_t wchar_t是C/C++的字符类型,是一种扩展的存储方式,wchar_t类型主要用在 ...

  10. zoj The 12th Zhejiang Provincial Collegiate Programming Contest Capture the Flag

    http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5503 The 12th Zhejiang Provincial ...