Long Bro博客——查看其它Long Bro影院
JavaWeb视频网站开发:吐槽墙模块实时同步显示已输入字数

  作者:赵成龙  发布时间:2018-12-09 19:06:53  所属类别:学习笔记  浏览量:474



 

具体的效果是如下三图所示这样的,当向输入框中输入字符时,程序会自动计算已输入的字符,并显示至指定区域。实例可参见553影院吐槽墙

LongBro博客欢迎你

图1

LongBro博客欢迎你

图2

LongBro博客欢迎你

图3

接下来叙述实现上述效果功能所需代码:

1.首先,定义一个位置来显示已输入的字符数

LongBro博客欢迎你

2.接着,需要在输入框中添加onkeyup监听事件,以使键盘每敲击一次就计算并显示一次已输入字数

onkeyup="writting()"

3.编写js代码,实现实时计算已输入字符数量并赋值给第1步中定义的id为wordnum

/**
* 设置输入时已输入内容字数
*/
function writting(){
var co=document.forms.toast.value;//吐槽内容
co=co+"";
document.getElementById("wordnum").innerHTML="<font color=\"red\">"+co.length+"</font>";
}

OK,以上3步就可以实现这一酷炫功能啦,是不是超级简单实用呀。





本文出自LongBro博客,如需转载请注明出处。
本文链接:http://www.longqcloud.cn/blogs/65.html
上一篇:分手并不可怕,生活还要继续下去
下一篇:记我的第一次面试




如果你觉得这篇文章对你有用,欢迎 打赏(打赏记录)

打赏多少,你高兴就行,谢谢你对Long Bro这小子的支持  ^-^

来自:122.238.175.73的评论

很不错的功能了

2018-12-11 13:48:29


来自:222.136.181.209的评论

88952634

2019-02-19 14:52:08


来自:222.136.181.209的评论

88952634'`"(

2019-02-19 14:52:09


来自:222.136.181.209的评论

88952634-0

2019-02-19 14:52:11


来自:222.136.181.209的评论

88952634s3

2019-02-19 14:52:11


来自:222.136.181.209的评论

88952634'+'

2019-02-19 14:52:13


来自:222.136.181.209的评论

88952634'

2019-02-19 14:52:14


来自:222.136.181.209的评论

88952634'||'

2019-02-19 14:52:15


来自:222.136.181.209的评论

88952634'

2019-02-19 14:52:16


来自:222.136.181.209的评论

88952634

2019-02-19 14:52:17