您的位置：首页 > 运维架构

自己写的，用onpropertychange 和 oninput时间实现对文本框的实时触发

2016-07-02 16:14 316 查看

代码如下：

<!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)" oninput="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几个版本的浏览器中测试，均无法实现其效果，无法实现动态监测字数变化的功能。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航