具体的效果是如下三图所示这样的,当向输入框中输入字符时,程序会自动计算已输入的字符,并显示至指定区域。实例可参见553影院吐槽墙
图1
图2
图3
接下来叙述实现上述效果功能所需代码:
1.首先,定义一个位置来显示已输入的字符数
已输入<span id="wordnum"><font color="red">0</font></span>字符,需小于<font color="red">245</font>字符且不为空
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步就可以实现这一酷炫功能啦,是不是超级简单实用呀。