<!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. 在chrome下的文本框sendkeys,提示element can&#39;t focus--解决方法

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

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

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

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

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

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

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

  7. html input 文本框的一些操作(限制输入...)

    1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...

  8. Jquery 提示还可以输入的字数,将多余的字数截取掉

    js代码: $(function () { var counter = $("#divform textarea").val().length; //获取文本域的字符串长度 $( ...

  9. IE浏览器 下面的文本框,获得焦点后无法输入内容

    今天遇到一个问题,在IE浏览器下面,我点击 按钮  弹出一个弹出层,里面有一个 文本编辑器和一个文本框,但是第二次弹出后,文本框和文本编辑器无法输入内容,在控制台用js代码测试 $(document) ...

随机推荐

  1. MySQL配置、使用规范

    一.表名 和 数据库名 不要用大小写混合(即驼峰式),应该全部用小写,使用下划线作为连接符. Linux中表名默认区分大小写,Windows中默认不区分(全部转为小写),相互间的导入导出会有问题!! ...

  2. Xcode 的一些调式技巧

    XCode 内置GDB,我们可以在命令行中使用 GDB 命令来调试我们的程序.下面将介绍一些常用的命令以及调试技巧. po 命令:为 print object 的缩写,显示对象的文本描述(显示从对象的 ...

  3. SQLite中的时间日期函数(转)

    SQLite包含了如下时间/日期函数: datetime().......................产生日期和时间date()...........................产生日期tim ...

  4. C#使用读写锁三行代码简单解决多线程并发写入文件时线程同步的问题

    (补充:初始化FileStream时使用包含文件共享属性(System.IO.FileShare)的构造函数比使用自定义线程锁更为安全和高效,更多内容可点击参阅) 在开发程序的过程中,难免少不了写入错 ...

  5. ASP.NET mvc异常处理的方法

    第一种:全局异常处理 1.首先常见保存异常的类(就是将异常信息写入到文件中去) public class LogManager { private string logFilePath = strin ...

  6. JSP 中的 tag 文件

    在jsp文件中,可以引用 tag 和tld 文件,本文主要针对 tag 对于tag 文件 1)将此类文件放在 WEB-INF 下,比如 /WEB-INF/tags,tags 是目录,其下可以有多个.t ...

  7. //sql过滤关键字

    //sql过滤关键字 public static bool CheckKeyWord(string sWord) { //过滤关键字 string StrKeyWord = @"select ...

  8. 【转】BUFFER CACHE WAIT EVENTS

    文章转自:http://oracleinaction.com/buffer-cache-wait-events/

  9. 【Win 10应用开发】如何知道当前APP在哪个平台设备上运行

    在做Win10开发的时候,我们可能经常会需要获得当前程序在在哪个平台设备上运行,用于UI和相关API的调用,那么可以通过什么方式知道当前APP运行的平台呢? 今天这里提供两个方法给大家做参考: 方法一 ...

  10. FJNU 1154 Fat Brother And His Love(胖哥与女神)

    FJNU 1154 Fat Brother And His Love(胖哥与女神) Time Limit: 2000MS   Memory Limit: 257792K [Description] [ ...