JavaWeb视频网站开发:吐槽墙模块实时同步显示已输入字数

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

                                         图1

                                           图2

                                           图3

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

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

已输入<span id="wordnum"><font color="red">0</font></span>字符,需小于<font color="red">245</font>字符且不为空

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

οnkeyup="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步就可以实现这一酷炫功能啦,是不是超级简单实用呀。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值