代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.main {
width: 546px;
margin: 0 auto;
margin-top:40px;
border: 1px solid #9BAABD;
}
.top {
width: 500px;
height: 200px;
margin: 20px 20px 0 20px;
color:#CCC;
}
.footer {
position: relative;
height: 45px;
line-height: 45px;
margin-top: 10px;
border-top: 1px solid #D7D7D7;
}
.footer .demt {
position: absolute;
left: 20px;
color: #999;
font-size: 14px;
}
.footer input {
position: absolute;
width: 90px;
height: 25px;
right: 20px;
margin-top: 10px;
}
.footer .color{
color:#F00;
}
</style>
<script>
function ck_textarea_onFocus(obj)
{
if(obj.value==obj.defaultValue)
{
obj.value="";
}
obj.style.color="#000";
}
function ck_textarea_onBlur(obj)
{
if(obj.value=="")
{
obj.value=obj.defaultValue;
obj.style.color="#CCC";
}
}
function ck_textarea_onProchange(obj)
{
var score=140-obj.value.length;
document.getElementById("test").innerHTML=score;
obj.value=obj.value.substr(0,140);
}
function ck_textarea_onInput(obj)
{
var score=140-obj.value.length;
document.getElementById("test").innerHTML=score;
obj.value=obj.value.substr(0,140);
}
</script>
</head>
<body>
<div class="main">
<textarea id="textarea" rows="10" cols="50" class="top" onFocus="ck_textarea_onFocus(this)" onBlur="ck_textarea_onBlur(this)" onpropertychange="ck_textarea_onProchange(this)" οninput="ck_textarea_onInput(this)">欢迎每天微评爱车哦....</textarea>
<div class="footer"> <span class="demt">您还可以输入 <span id="test" class="color"></span> 个字</span>
<input type="submit" value="提交" />
</div>
</div>
</body>
</html>
代码的详细分析:
function ck_textarea_onFocus(obj)
{
if(obj.value==obj.defaultValue)
{
obj.value="";
}
obj.style.color="#000";
}
function ck_textarea_onBlur(obj)
{
if(obj.value=="")
{
obj.value=obj.defaultValue;
obj.style.color="#CCC";
}
}
1.以上代码就是实现当文本框获取焦点的时候,如果默认真发生改变,则显示改变后的内容,内容样式发生变化,如果获取焦点再失去焦点后默认值没有发生变化,则为原来默认值和样式、
以上代码可以仔细思考一下。
2.
function ck_textarea_onProchange(obj)
{
}
function ck_textarea_onInput(obj)
{
}
onpropertychange输入IE浏览器专有事件属性,对于其他的浏览器,需要用oninput标准事件进行输入时触发来判断。
3.
obj.value=obj.value.substr(0,140);
当文本框用户输入字数超过限制的字数时,可以用substr()函数进行截取,相关的函数在博客有详细的介绍,前面参数为下表,后面参数为截取的字符串长度。
思考:
1.兼容性问题,在IEtest中测试出现object expected 错误提示,脚本不能得到执行,IE6.7.8均是, 360浏览器,火狐浏览器测试没有问题。 后来发现一个函数名字次写错造成的,现已经改正。
2.当用户输入超过140字的时候,原来代码会出现:您还可以输入-1个字,将substr()函数放在前面,这样先截取前140个字符,然后再判断剩余还有多少个字符,这样就不存在输入统计出错问题,改成后为:
function ck_textarea_onInput(obj)
{
obj.value=obj.value.substr(0,140);
var score=140-obj.value.length;
document.getElementById("test").innerHTML=score;
}
3.暂时还没有发现其他的问题,后期测试中再改进。
在IE几个版本的浏览器中测试,均无法实现其效果,无法实现动态监测字数变化的功能。