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

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

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

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

以下是相关的JavaScript代码：
以下为引用的内容：


代码如下:

<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>

赞 (0)

相关推荐

  • JS控制文本框textarea输入字数限制的方法

    复制代码 代码如下: <html>     <head>     <title>JS限制Textarea文本域字符个数</title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <SCRIPT LANGUAGE="JavaScript">     <!--

  • js实现多行文本框统计剩余字数功能

    js实现多行文本框统计剩余字数功能

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js统计文本框剩余字数</title> <style type="text/css"> #area{ width: 300px; height: 300px; resize:none; } </st

  • js判断文本框剩余可输入字数的方法

    本文实例讲述了js判断文本框剩余可输入字数的方法.分享给大家供大家参考.具体如下: 目的:为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数 JS实现方法 复制代码 代码如下: <html>  <head runat="server">      <title></title>      <script type="text/javascript"> 

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

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

  • Javascript实现字数统计

    字数统计功能,原理是给textarea添加onKeyup事件,事件读取textarea内容并获得长度,并赋值给统计字数的那个文本节点,这里有一点要注意的是添加onKeypress和onKeydown事件也能实现效果,但都有些不足,会在某些情况下造成误解,我都试了下,感觉只用一个onKeyup事件是最明智的选择. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g

  • js实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求. 通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用.假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为1

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

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

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

  • js实时计算字数提醒的文本框

    js实时计算字数提醒的文本框

    自己想了一下应该是用JavaScript实现的,今天把它做出来了.原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件显示出来就可以了. 效果图:演示代码: enter function keypress1() //text输入长度处理 { var text1=document.getElementById("mytext1").value; var len=15-text1.length; v

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

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

  • JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】

    本文实例讲述了JavaScript实现的仿新浪微博原生态输入字数即时检查功能.分享给大家供大家参考,具体如下: 边在文本框输入字符边对输入的字数进行检查本来不难的,但是由于其中有些函数的使用方式大家容易混乱,很容易导致整个结果搞来搞去也没有搞出来,也容易出Bugs,注意这里不能再使用length函数了,因为这个东西英文算一个字符,汉字也算一个字符,不符合数据传递的形式.也不能用OnChange事件了,这事件要光标离开为文本框才会触发,必须改成更加即时的OnKeyUp. 一.基本目标 如下图,完成

随机推荐