javascript实例学习之二——类新浪微博的输入框
2024-08-26 14:44:07
该案例实现如下效果,具体可见新浪微博网站的微博发布框
实现 以下效果
效果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:%;height:150px;}
div a{float:right;padding:10px 20px;font-size: 16px;background:#0f0;color:#fff;}
div a.disable{background: #ccc;color:#;}
</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')[];
var oT = oDiv.getElementsByTagName('textarea')[];
var oA = oDiv.getElementsByTagName('a')[];
//实现效果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')[];
var curLength = Math.ceil(getLength(oT.value) / );
if (curLength <= ) {
oS.innerHTML = - curLength;
} else {
oS.innerHTML = curLength - ;
oS.style.color = 'red';
}
if (curLength <= || curLength > ) {
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 = ;
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 >= ) {
clearTimeout(timer);
num=;
return;
}
if (num % ) {
oT.style.background = 'pink';
} else {
oT.style.background = '';
}
timer = setTimeout(changeBgColor, );
}
timer = setTimeout(changeBgColor, );
} else {
alert('微博已发布!');
}
}, false); }, false);
微博发布框javascript代码
收获:
1.背景闪动!联系动画!
2.文本框连续输入事件,ie下是onpropertychange,标准下是input
最新文章
- [No00007F]2016-面经[下] 英文简历写作技巧
- Quartz2D复习(一)--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图
- RAL 标准颜色表(RAL Color Chart)
- 获取 苹果UDID 序列号
- Java递归输出指定路径下所有文件及文件夹
- DirectX基础学习系列8 渐进网格以及外接体
- 关于C++与Java中虚函数问题的读书笔记
- Linux Shell多进程并发以及并发数控制
- Eclipse内存溢出问题
- Linux编程之UDP SOCKET全攻略
- OJ周末题
- 【BZOJ1565】 植物大战僵尸
- ruby中如何直接编译运行C代码
- python学习笔记(11)--词云
- Redhat上为java Maven项目构建基于Jenkins + Github的持续集成环境
- 缓存系列之二:CDN与其他层面缓存
- php 中的秒杀
- error: control may reach end of non-void function [-Werror,-Wreturn-type]
- SCU 4438:Censor
- nodejs开发——require与exports的使用
热门文章
- JAVA图片相关
- PHP 错误与异常 笔记与总结(9)自定义错误处理器
- UnrealEngine4 PBR Shading Model 概述
- Ubuntu下配置C/C++开发环境
- 【转】Eclipse Class Decompiler——Java反编译插件
- FW:: ehcache memcache redis 三大缓存男高音
- .NET 可空值类型
- 【Android测试】【第三节】ADB——源码浅谈
- shopping cart<;代码>;
- Android笔记:Select at least one project解决办法