仿微博输入框效果
2016-11-12 13:04
106 查看
这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果。
效果图:
代码:
思路:首先给文本域添加键盘按下事件,然后动态的修改显示数字的值,如果输入超过140个字符的话,就让数字一直显示0,然后截取前140个字符重新赋值到文本域中。
效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </head> <body> <textarea name="" id="" cols="30" rows="10"></textarea> <sapn>您还可以输入<strong style="color:red">140</strong>个字</sapn> </body> <script> //给文本域响应键盘按下事件 $('textarea').keyup(function(){ var maxLength = 140; var len = $(this).val().length; $('strong').text(maxLength-len); //判断输入是否超过140个数 if(parseInt($('strong').text()) < 0){ $('strong').text(0); //截取前140个字符并重新塞到文本域中 var content = $(this).val().substring(0,140); $(this).val(content); } }); </script> </html>
思路:首先给文本域添加键盘按下事件,然后动态的修改显示数字的值,如果输入超过140个字符的话,就让数字一直显示0,然后截取前140个字符重新赋值到文本域中。
相关文章推荐
- 仿微博输入框效果
- JavaScript仿微博输入框效果(案例分析)
- jquery实现微博文字输入框 输入时显示输入字数 效果实现
- Android 类似微信登录输入框效果
- CSS3 输入框阴影效果及其他阴影效果
- 初识安卓之:微博下拉刷新效果的实现
- 怎么用Java实现QQ消息输入框这种能表情图片和文字混排的效果
- JavaScript模仿微博发布效果
- jquery实现仿新浪微博评论滚动效果
- 实现网页中的搜索输入框效果 onfocuse onblur js 验证手机号 座机区号
- JS实现输入框提示文字点击时消失效果
- 实现百度搜索输入框效果
- Android实现通用的ActivityGroup(效果类似Android微博客户端主界面),强烈建议不要再使用TabActivity
- swift实现ios类似微信输入框跟随键盘弹出的效果
- JS实现单击输入框弹出选择框效果完整实例
- css3实现input输入框颜色渐变发光效果代码
- 微博@符号的用户名提示效果。(想@到谁?)
- Jquery实现弹出层分享微博插件具备动画效果
- 如何设置输入框达到只读效果
- 输入框提示列表效果