该案例实现如下效果，具体可见新浪微博网站的微博发布框
实现 以下效果
效果1：当光标移入文本框时，文本框上方的文字发生变化，显示剩余可以输入的字数，当光标移出文本框，并且文本框中没有任何输入时，恢复最初默认的文字
效果2：文本输入的时候，文本框提示剩余文本数，剩余文本字数随着输入字数而减少,两个字母算一个字，一个汉字算一个字
效果3:当输入框为空，或者输入框内的文本超过140个字的时候，发布按钮不可用，否则可用；在发布按钮不可用的情况下点击发布按钮，文本框会出现红色背景，并闪动两次
对应的html代码：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>微博发布框效果</title>
<style>
body{font-size: 12px}
div{width:400px;margin:20px auto;}
div p{float:right; }
div textarea{width:100%;height:150px;}
div a{float:right;padding:10px 20px;font-size: 16px;background:#0f0;color:#fff;}
div a.disable{background: #ccc;color:#666;}
</style>
</head>
<body>
<div id="div1">
<p>他们都在读什么？企业#大咖私藏书单#，领导者的思想盛宴 </p>
<textarea name="" id="" ></textarea>
<a href="#" class="disable">发布</a>
</div>
<script src="js/weiboInput.js"></script>
</body>
</html>
微博发布框html代码
对应的javascript代码：
//实现 以下效果
//效果1：当光标移入文本框时，文本框上方的文字发生变化，显示剩余可以输入的字数
//当光标移出文本框，并且文本框中没有任何输入时，恢复最初默认的文字
//效果2：文本输入的时候，文本框提示剩余文本数，剩余文本字数随着输入字数而减少,两个字母算一个字，一个汉字算一个字
//效果3:当输入框为空，或者输入框内的文本超过140个字的时候，发布按钮不可用，否则可用；在发布按钮不可用的情况下点击发布按钮，文本框会出现红色背景，并闪动两次
document.addEventListener(‘DOMContentLoaded‘, function() {
var oDiv = document.getElementById(‘div1‘);
var oP = oDiv.getElementsByTagName(‘p‘)[0];
var oT = oDiv.getElementsByTagName(‘textarea‘)[0];
var oA = oDiv.getElementsByTagName(‘a‘)[0];
//实现效果1
oT.addEventListener(‘focus‘, function() {
oP.innerHTML = "还可以输入<span>140</span>个字";
}, false);
oT.addEventListener(‘blur‘, function() {
if (!this.value) {
oP.innerHTML = "他们都在读什么？企业#大咖私藏书单#，领导者的思想盛宴";
}
}, false);
//实现效果2,连续输入在标准下触发的是input事件，在ie中触发的是onproperty事件
oT.addEventListener(‘input‘, function() {
var oS = oDiv.getElementsByTagName(‘span‘)[0];
var curLength = Math.ceil(getLength(oT.value) / 2);
if (curLength <= 140) {
oS.innerHTML = 140 - curLength;
} else {
oS.innerHTML = curLength - 140;
oS.style.color = ‘red‘;
}
if (curLength <= 0 || curLength > 140) {
oA.className = ‘disable‘;
} else {
oA.className = ‘‘;
}
}, false);
function getLength(str) {
return str.replace(/[^\x00-\xff]/g, ‘aa‘).length;
}
//实现效果3
oA.addEventListener(‘click‘, function() {
var timer;
var num = 0;
if (oA.className === ‘disable‘) {
//文本框的背景变成红色并且闪动两次
// clearInterval(timer);
// timer = setInterval(function() {
// num++;
// if (num == 4) {
// clearInterval(timer);
// num = 0;
// }
// if (num % 2) {
// oT.style.background = ‘pink‘;
// } else {
// oT.style.background = ‘‘;
// }
// }, 150);
//尝试利用超时调用来模拟间歇调用
clearTimeout(timer);
function changeBgColor() {
num++;
if (num >= 5) {
clearTimeout(timer);
num=0;
return;
}
if (num % 2) {
oT.style.background = ‘pink‘;
} else {
oT.style.background = ‘‘;
}
timer = setTimeout(changeBgColor, 150);
}
timer = setTimeout(changeBgColor, 150);
} else {
alert(‘微博已发布！‘);
}
}, false);
}, false);
微博发布框javascript代码
收获：
1.背景闪动！联系动画！
2.文本框连续输入事件，ie下是onpropertychange,标准下是input
时间： 2024-11-07 15:51:51