JavaScript中统计Textarea字数并提示还能输入的字符_javascript技巧

现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验。

如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同。

使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一段JavaScript函数,函数调用的参数为span的id和textarea的id,然后再JavaScript中使用innerHTML返回计算出来的剩余字数。

核心Javascript代码:

复制代码 代码如下:

<span style="font-size:18px;"><script language="javascript">
function countChar(textareaName,spanName)
{
document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;
}
</script>
可以输入<span id="counter">140</span>字<br/>
<textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter");'
onkeyup='countChar("status","counter");'></textarea></span>

PS:本站还提供了一个关于字数统计的在线工具,感兴趣的朋友可以参考一下:

在线字数统计工具:

http://tools.jb51.net/code/zishutongji

时间: 2024-11-02 10:05:21

JavaScript中统计Textarea字数并提示还能输入的字符_javascript技巧的相关文章

asp.net 仿腾讯微薄提示 还能输入*个字符 的实现代码_实用技巧

textbox如果设置TextMode="MultiLine"则 它的MaxLength设置的值就无效:为了能达到像腾讯微薄.新浪微薄那样的提示的效果(腾讯和新浪微薄文本框用到的应该是textarea),尝试如果不考虑用鼠标操作粘贴.删除textbox的内容,用jquery的keyup和keydown能实现,下面是实现的一个技巧,用到了js的计时器(当焦点在textbox中则"开启"计时器,失去焦点则"关闭"计时器),很好的解决了鼠标操作粘贴.删

JavaScript中style.left与offsetLeft的使用及区别详解_javascript技巧

如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. st

Javascript中判断一个值是否为undefined的方法详解_javascript技巧

前言 相信大家都知道当声明一个变量,并且没有给赋值的情况下,它的初始值是undefined.但是在javascript中,怎么检查一个值是否为undefined呢? 简单来说,在现代浏览器中,你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能

javascript中去除数组重复元素的实现方法【实例】_javascript技巧

在实际应用中,我们很多时候都可能需要去除数组中的重复元素,下面就是javascript数组去重的方法实现: <script language="javascript"> <!-- /*判断数组中是否存在某个元素的方法*/ function isExistInArr(_array, _element){ if(!_array || !_element) return false; if(!_array.length){ return (_array == _elemen

开启Javascript中apply、call、bind的用法之旅模式_javascript技巧

我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先给大家列出一段代码示例: function fruits() {} fru

JavaScript中的公有、私有、特权和静态成员用法分析_javascript技巧

本文实例讲述了JavaScript中的公有.私有.特权和静态成员用法.分享给大家供大家参考.具体分析如下: 下面的内容是在<JavaScript.DOM高级程序设计>里面摘抄出来的,比较容易理解,特在此记录一下,便于入门Javascript的朋友们分享一下哈. 复制代码 代码如下: //构造函数 function myContructor(message){ this.myMessage = message; //私有属性 var separator = ' -'; var myOwner =

Javascript中匿名函数的调用与写法实例详解(多种)_javascript技巧

Javascript中定义函数的方式有多种,函数直接量就是其中一种.如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数.好,看看匿名函数的如何被调用. 方式1,调用函数,得到返回值.强制运算符使函数调用执行 (function(x,y){ alert(x+y); return x+y; }(3,4)); 方式2,调用函数,得到返回值.强制函数直接量执行再返回一个引用,引用再去调用执行 (function(x,y){ alert(x+y);

JavaScript中访问id对象 属性的方式访问属性(实例代码)_javascript技巧

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

计算新浪Weibo消息长度(还可以输入119字)_javascript技巧

此文为计算新浪Weibo的消息长度的方法. 就是 (发言请遵守社区公约,还可以输入119字). 复制代码 代码如下: var getMessageLength = (function() { var byteLength = function(b) { if(typeof b == "undefined") { return 0; } var a = b.match(/[^\x00-\x80]/g); return(b.length + (!a ? 0 : a.length)); };