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; }
用到的图片:
1.
2.
js模仿新浪微博限制字数输入的更多相关文章
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- js控制文本框只能输入中文、英文、数字与指定特殊符号.
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
- js限制文本框只能输入数字方法小结(转)
这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...
- js限制文本框只能输入整数或者带小数点[转]
这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...
- JS 控制文本框只能输入中文、英文、数字与指定特殊符号
想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...
- js模仿jquery里的几个方法parent, parentUntil, children
有时工作需要, 也是接着上一章的方法, 用js模仿jquery里的几个方法parent, parentUntil, children. function parent(node){ return no ...
- js模仿块级作用域(js没有块级作用域私有作用域)
js模仿块级作用域(js没有块级作用域私有作用域) 一.总结 1.js没有块级作用域:在for循环中定义的i,出了for循环还是有这个i变量 2.js可以模拟块级作用域:用立即执行的匿名函数:(匿名函 ...
- (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- JS动态呈现还可以输入字数
现在觉得当我们使用js或者jquery来呈现一个动态效果时,主要还是要想清楚它的思想.它的原理.而动态呈现输入字数,其实就是给它设置一个最大输入字数,然后获取已输入的字数,自然想做什么都可以. < ...
随机推荐
- kiosk-mode,免密码登陆, sideload Windows Store apps 等
MVVM带来的性能问题及其解决方案 MVVM 和语言性能提示:https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/mt628050. ...
- SQL Split
最初是根据数据ID批量删除数据,因为不知道到底是要删除多少条,而T-sql里也没有像C#中params这样方便的东西,所以想到字符串分割,但是发现T-sql中也没有提供字符串分割的函数,所以自己搜索了 ...
- Features
imhist分析灰度图阈值分界点 bwlabel分析连通区域 SIFT Scale Invariant:尺度不变性 DoG: Difference of Gaussian, calculated by ...
- android 不同dpi图标大小
LDPI (Low Density Screen,120 DPI),其图标大小为 36 x 36 px.MDPI (Medium Density Screen, 160 DPI),其图标大小为 48 ...
- tail queue代码阅读
tail queue是bdb中用的最多的数据结构. 定义在 src/dbinc/queue.h: 注: TRACEBUF,QMD_TRACE_HEAD等是为了 queue代码的debug, 这里移除出 ...
- CMM能力成熟度模型
CMM把软件企业的过程管理能力划分为5个等级: 1 .初始级:个别的.混乱无序的过程,软件缺乏定义,项目的成功严重依赖于某几个关键人员的努力.软件质量由个人的开发经验来保障. 2.可重复级 实施了基 ...
- SQL导入Excel文件
如果表已存在,SQL语句为: insert into aa select * from OPENDATASOURCE('Microsoft.Jet.OLEDB.4.0', 'Data Source=D ...
- Android addHeaderView和setAdapter的调用顺序后报错
在4.4之前的系统,setAdapter后再设置addHeaderView会爆 ListView想要添加headerview的话,就要通过addHeaderView这个方法,然后想要为ListView ...
- vb小菜一枚-----了解“类型推理”
局部类型推理 (Visual Basic) Visual Studio 2013 其他版本 Visual Basic 编译器使用类型推理来确定未使用 As 子句声明的局部变量的数据类型. 编译 ...
- 升级到win8.1右键响应慢
网上很多资料都是在显卡上做文章,试了N次确定不是这个问题. 后来查到这个好用了.以管理员身份运行 下面代码保存bat即可 regsvr32 /u /s igfxpph.dll reg delete H ...