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

现在流行的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

赞 (0)

相关推荐

  • JavaScript输入框字数实时统计更新

    JavaScript输入框字数实时统计更新

    在前端开发中,很多情况下需对输入内容进行验证.实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容. 字数实时统计更新 下面将以[消息内容]为例,设计实现输入框字数实时统计更新功能. 项目架构如下: message  message.css     message.js     message.tpl 1. 在message.tpl文件中定义网页元素 //移动端微信公众号开发 <div class="weui-cell__bd"> <textar

  • JavaScript动态提示输入框输入字数的方法

    本文实例讲述了JavaScript动态提示输入框输入字数的方法.分享给大家供大家参考.具体如下: 在QQ空间里有小纸条那么一个功能,随着你在文本框中输入多少字,上面会动态提示你"已经输入多少字"和"还可以输入多少字",觉得挺好的,所以自己也试着做做,呵呵.   开始,我想很多人第一感觉就是通过js的 onkeydown或者onkeyup来做,中发现还可以用focus + setInterval() +blur来达到我们需要的效果,于是很快的我利用这种方法自己粗糙的写

  • 关于JavaScript限制字数的输入框的那些事

    关于JavaScript限制字数的输入框的那些事

    前言 最近产品需要做不少输入框,产品想要的交互效果是:用户可以输入中英文,随着用户输入能实时显示已经输入的字符个数,当超过数量限制时输入框边框变红,同时给用户提示信息. 这交互听起来没啥问题,技术实现上似乎也没啥难点.但是当我实现出来以后遇到中文输入法就有坑了. 怎么个坑呢,且看下文~~ 实时监测输入框内容长度所遇到的坑使用 oninput事件来监听 使用这个oninput事件的好处有2个: 当用户通过右键复制改变输入框内容时,可以监听到: 只有在输入框内容发生变化时才会触发此事件,比如用户按下

  • 利用Angularjs和原生JS分别实现动态效果的输入框

    利用Angularjs和原生JS分别实现动态效果的输入框

    在刚开始没有给输入框添加焦点之前,没有任何效果.见下图: 然后点击其中任何一个,焦点就会触发一个动画,动画的结果见图二: 中间的输入登录密码文字,会自动添加到顶部(原谅我没有截取到动画过程的图片). 我测试了一下,这样的效果只有高级浏览器支持(IE只有IE10.IE11.Edge支持). 下面我来把代码贴上来,原理很简单,就是通过事件触发类名的增加和删除.具体的动画由CSS3来实现,这也是为什么低级浏览器不支持的原因. 原生JS实现示例: <!DOCTYPE html> <html la

  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

    把js的验证方法改成angular可使用的方法 AngularJS文件的写法: $scope.clearNoNum = function(obj,attr){ //先把非数字的都替换掉,除了数字和. obj[attr] = obj[attr].replace(/[^\d.]/g,""); //必须保证第一个为数字而不是. obj[attr] = obj[attr].replace(/^\./g,""); //保证只有出现一个.而没有多个. obj[attr] = o

  • Javascript实现真实字符串剩余字数提示的实例代码

    复制代码 代码如下: //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) {     var str = thisArea.value;     if (getChrLen(str, maxLength) > maxLength * 2) {         thisArea.value = str.substring(0, x-1);     }     else {         var vars

  • AngularJS实现的输入框字数限制提醒功能示例

    AngularJS实现的输入框字数限制提醒功能示例

    本文实例讲述了AngularJS实现的输入框字数限制提醒功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net AngularJS字数提示</title> </head> <style> *{ margin:0; paddi

  • .NET+JS对用户输入内容进行字数提示功能的实例代码

    第一步:以下是核心代码,在页面引用或进行封装都可. 复制代码 代码如下: <script language="javascript" type="text/javascript"> function textLimitCheck(thisArea, maxLength, SpanId) { if (thisArea.value.length > maxLength) { thisArea.value = thisArea.value.substri

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

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

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

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

  • jQuery扩展实现text提示还能输入多少字节的方法

    jQuery扩展实现text提示还能输入多少字节的方法

    本文实例讲述了jQuery扩展实现text提示还能输入多少字节的方法.分享给大家供大家参考,具体如下: 1.添加jQuery自定义扩展 $(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function(tipWrap, maxNumber){ var countClass = 'js_txtCount', // 定义内部容器的CSS类名 fullClass = 'js_txtFull', //

  • 动态显示可输入的字数提示还可以输入的字数

    复制代码 代码如下: <input name="title" type="text" size="50" value="{$p.title}" maxlength="15" onkeyup="javascript:setShowLength(this, 15, 'cost_tpl_title_length');"><span class="red"

  • 新浪微博字数统计 textarea字数统计实现代码

    复制代码 代码如下: /* * 从新浪微博上抄的 * */ var getLength = (function(){ var trim = function(h) { try { return h.replace(/^\s+|\s+$/g, "") } catch(j) { return h } } var byteLength = function(b) { if (typeof b == "undefined") { return 0 } var a = b.m

  • JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验. 如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同. 使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一

  • javascript中的数据类型检测方法详解

    本文实例讲述了javascript中的数据类型检测方法.分享给大家供大家参考,具体如下: 在javascript中数据类型 值类型: 布尔(Boolean),数值(Number),字符(String),空(Null),未定义(Undefined) 引用类型: 对象(Object),函数(Function),数组(Array),日期(Date),正则(RegExp)等等. 检测方式之 typeof console.log(typeof undefined)//'undefined' console

  • JavaScript中Textarea滚动条不能拖动的解决方法

    本文实例分析了JavaScript中Textarea滚动条不能拖动的解决方法.分享给大家供大家参考,具体如下: 在IE中,你是否碰到过Textarea的滚动条不能拖动,但点上下按钮可以滚动内容? 这个问题的原因很可能就是在该Textarea中绑定了onfocus事件,但是,基于某种条件,又将其焦点去掉(即blur()),这样就导致滚动条不能拖动. 一个典型的例子为: me.$input.on("focus",function(){ if ($isIE && me.ena

  • javascript textarea字数限制

    这一个是读取textarea的maxlength属性的值,进行计算,思路很好,但修改起来就麻烦啊,不过对于js爱好者来说是个不错的参考,通过读取属性值进行控制. textarea字数限制 练习代码多有参考网络 by ahuinan var TextUtil = new Object(); TextUtil.NotMax = function(oTextArea){ var maxText = oTextArea.getAttribute("maxlength"); if(oTextAr

  • JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

    js中输出信息的方法内容如下所示: 1.文档流输出 document.write('hello'); 2.输出信息提示框 模态对话框 window.alert('要输出显示的内容'); 或 alert('要输出显示的内容'); alert(n); 3.信息确认框 var f = window.confirm('是否要进入新浪网'); confirm(""); if(f){ location.href = 'http://www.sina.com.cn'; } 4.提示输入框 windo

随机推荐