js模仿新浪微博限制字数输入

功能：实现新浪微博输入字数提醒功能；最多输入140个字，当输入字时，上面提示部分字数发生变化，如果字数小于25，字体颜色变红；当可输入字数为0时，强制不能输入，如果用中文输入法

一次性输入很多字，那么将自动丢失后面的字。

原理：根据js中onkeyup()函数获取键盘监听事件，来改变文字的同时监听文本域中文字的数量。

效果图：

代码：

html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><link href="css/home.css" rel="stylesheet" type="text/css"/><script src="js/home.js"></script><title>模仿新浪微博</title>
</head>
<body><div id="content"><div id="cont_Right"><div id="share"><div id="word"><img src="data:images/send_weibo.png"/><div class="aviableCount">还可以输入<span id="sp">140</span>字</div></div><div id="box"><div class="box1"><!--设置最大输入字符长度为140--><textarea onkeyup="show()"  cols="55" rows="25" style="resize: none" name="weiboTextArea" id="weiboTextArea" class="box2" maxlength="140"></textarea></div></div><div id="sub"><input name="submit" type="button" value="广播"/></div></div>
</div>
</body>
</html>

js:

function show(){var tarea=document.getElementById("weiboTextArea");var maxlength=140;var length=tarea.value.length;var count=maxlength-length;var sp=document.getElementById("sp");sp.innerHTML=count;if(count<=25){sp.style.color="red";}else{sp.removeAttribute("style");}}

css:

@charset "utf-8";body{margin:0px;padding:0px;background-image:url(../images/mm_body_bg.jpg);
}
#content{//border:#000 thin 2px;
    width:850px; margin:0px auto;padding:45px 0px 0px 0px;//background:#D2EAEE repeat;

}
#cont_Right{background:#FFF;width:605px;  height:auto;min-height:500px; margin:0px auto;padding:0px;display:block;float:right;
}
#share{//background-color:#CCC;
    width:550px;height:175px;margin:0px auto;//border-bottom:1px solid #CCCCCC;
    padding:0px;
}
#word{margin:15px 0px 0px 20px;padding:0px;
}
#box{background-color:#063;width:550px;height:90px;
}
.box1{width:542px;height:50px;margin:7px 0px 0px 0px;padding:2px 3px 0px 3px;
}
.box2{width:540px;height:60px;border: 1px solid #CCCCCC;margin:0px;padding:8px 0px 0px 4px;font-family:Tahoma, Geneva, sans-serif;font-weight: normal;font-size: 12px;
}#sub{float:right;margin:5px 0px 0px 0px;
}

用到的图片：

js模仿新浪微博限制字数输入相关推荐

html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
php中strtotime(date,js模仿php中strtotime()与date()函数实现方法
本文实例讲述了js模仿php中strtotime()与date()函数实现方法.分享给大家供大家参考.具体如下: 在js中没有像php中strtotime()与date()函数,可直接转换时间戳,下面 ...
html判断整数小数点后两位小数点,js控制input框只能输入数字和一位小数点且小数点后面只有两位小数...
js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 js控制input框只能输入数字和一位小数点且小数点后面只有两位小数 212或 0.66; 过滤 00000,1.10,0.00 ...
js 正则判断用户是否输入表情
js 正则判断用户是否输入表情 var emouji = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;if(emouji.test(用户输入的值)){ ...
[JS+CSS] - 新浪微博滚动特效[兼容FF,Chrome和IE6,7,8]
来源:网络 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
【干货】JS 限制input文本框输入
JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=v ...
js模仿块级作用域（js没有块级作用域私有作用域）
js模仿块级作用域(js没有块级作用域私有作用域) 一.总结 1.js没有块级作用域:在for循环中定义的i,出了for循环还是有这个i变量 2.js可以模拟块级作用域:用立即执行的匿名函数:(匿名函 ...
html密码至少输入6位,JS实现六位字符密码输入器功能
老规矩~ 上DEMO,过过瘾先:六位字符密码输入器从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了) 一 ...
html中图片亮度调节,HTML+CSS+JS 模仿 Win10 亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...

js模仿新浪微博限制字数输入

js模仿新浪微博限制字数输入相关推荐

最新文章

热门文章