<!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. .Net 文本框实现内容提示(仿Google、Baidu)

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

  3. div模拟文本框textarea

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

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

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

  5. 在chrome下的文本框sendkeys,提示element can&#39;t focus--解决方法

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

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

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

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

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

  8. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

  9. ASP.NET 仿腾讯微博提示“还能输入*个字符”的实现

    textbox如果设置TextMode="MultiLine"则 它的MaxLength设置的值就无效:为了能达到像腾讯微薄.新浪微薄那样的提示的效果(腾讯和新浪微薄文本框用到的应 ...

随机推荐

  1. PYTHON 链接 Oracle

    一.  cx_Oracle Python 连接Oracle 数据库,需要使用cx_Oracle 包. 该包的下载地址:http://cx-Oracle.sourceforge.net/ 下载的时候,注 ...

  2. 委托--delegate

    委托,跟类很相似,能够定义对象,但是区别是 1,委托必须有关键字delegate. 2,委托有类型修饰符,比如void,string,int.修饰符取决于他的方法返回类型. 3,委托没有方法实现. d ...

  3. 将文件的编码格式转换为utf-8

    背景:项目中有一些其他部门发过来的代码,编码格式有utf-8,也有GBK,而且是散乱在各个文件夹中的,处理起来十分的麻烦.我想把他们都转成统一的utf-8的格式.代码很简单,直接上代码好了. impo ...

  4. ASCII、Unicode、GBK和UTF-8字符编码的区别联系[转]

    http://dengo.org/archives/901 这是我看过的最好的一篇讲述编码的文章 很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到 ...

  5. BZOJ 3926 &amp;&amp; ZJOI 2015 诸神眷顾的幻想乡 (广义后缀自动机)

    3926: [Zjoi2015]诸神眷顾的幻想乡 Time Limit: 10 Sec Memory Limit: 512 MB Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽 ...

  6. QQ对话代码

    <li> <strong class="QQ">客服QQ</strong> <span> <a href="mqqw ...

  7. Oracle实用-01:绑定变量

    数据库虽然在学校系统学习过,但是在工作中真正使用起来收获又是不一样的,今天起打算将项目中使用到的技术再分享出来,不以书本的顺序,只从碰到的问题为顺序. 虽然不是纯粹的数据库工程师,但是每个程序员总免不 ...

  8. File类基本操作之OutputStream字节输出流

    贴代码了,已经測试,可正常编译 package org.mark.streamRW; import java.io.File; import java.io.FileOutputStream; imp ...

  9. bzoj3831 [Poi2014]Little Bird 单调队列优化dp

    3831: [Poi2014]Little Bird Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 505  Solved: 322[Submit][ ...

  10. Extjs 解决grid分页bug问题

    //从后端获取数据加载到grid中var mainStore = new HeJsonStore({ url:'xxx', autoLoad:true, pageSize:20 }) //此方法最好放 ...