基于jQuery实现仿微博发布框字数提示
jQuery实现仿微博发布框字数提示,主要是运用字符串操作!
效果图:
HTML:
<textarea name="" id="" cols="30" rows="10"></textarea><br> <span>你还可以输入<strong style="color:red;">140</strong>个字</span>
JQ:
$(function(){ var maxlength=140;//初始化最大字数 $("textarea").keyup(function(){ var l=$(this).val().length; $("strong").text(maxlength-l);//还可以输入多少个 //字数超出 if(parseInt($("strong").text())<0){ $("strong").text(0);//强制字数 var val=$(this).val().substring(0,140);/*截取指定的字符串,左闭右开*/ $(this).val(val); } }); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中.我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作. 首先查看示例:DEMO XHTML 复制代码 代码如下: <form id="myform" action="" method="post"> <h3><span class="counter">140</span>说说你正
-
基于javascript制作微博发布栏效果
本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用 var ie=!-[1,];即可 2.连续发生事件的用法: IE下:触发对象.onpropertychange 标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
-
PHP+Mysql+jQuery实现发布微博程序 php篇
先还是要说明本例的业务流程: 1.前端用户输入内容,并对输入的内容字数进行实时统计. 2.用户提交数据,jQuery实现通过Ajax向后台发送数据. 3.后台PHP接收提交表单的数据,并对数据进行必要的安全过滤. 4.后台PHP连接Mysql数据库,并将提交过来的表单数据写入到相应的数据表中. 5.后台向返回成功结果数据内容,并通过Ajax将返回的数据内容插入到前端页面中. 上述1.2步在前篇文章:jQuery篇已讲解了,本文将完成剩余的散步. 效果图: 数据表 首先我们要准备一个数据表,表结构
-
使用新浪微博API的OAuth认证发布微博实例
继续前面的文章<新浪微博OAuth认证和储存的主要过程详解>,现在我们就使用它来发布微博. 我们已经将用户新浪微博的oauth_token和oauth_secret保存到 $_SESSION['oauth_token']=$result['oauth_token']; $_SESSION['oauth_secret']=$result['oauth_secret']; 里面,现在要做的就很简单了··就是调用sinaOauth的类进行发布.. 代码如下: //Statuses/update $c
-
js仿新浪微博消息发布功能
本文实例为大家分享了js仿新浪微博消息发布的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息发布功能</title> <style> *{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px so
-
原生JavaScript制作微博发布面板效果
javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s
-
JS实现模仿微博发布效果实例代码
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> * { margin: 0;
-
JavaScript仿微博发布信息案例
现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;
-
JS实现仿新浪微博发布内容为空时提示功能代码
本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:
-
基于jquery DOM写的类似微博发布的效果
复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>微博发布jq版</title> <meta name="Keywords" content=""> <meta name="Description" content="">
随机推荐
- 理解Python垃圾回收机制
- Redis配置文件详解
- EXTjs4.0的store的findRecord的BUG演示代码
- 原生js实现模拟滚动条
- java IO流文件的读写具体实例
- winserver 2012R2 安装oracle及创建表流程(推荐)
- javascript中几个容易混淆的概念总结
- mysql启动提示mysql.host 不存在,启动失败的解决方法
- IE和Firefox在JavaScript应用中的兼容性探讨
- 原生js实现轮播图的示例代码
- java怎么创建目录(删除/修改/复制目录及文件)代码实例
- 浅析c#中WebBrowser控件的使用方法
- 在Python中调用ggplot的三种方法
- VS2010/MFC编程(常用控件:树形控件Tree Control控件创建h和实例)
- C#实现写系统日志的方法
- PHP编程与应用
- 10G免费为您提供10G免费ASP空间
- Java 获取Web项目相对webapp地址的实例
- Android 曲线图的绘制示例代码
- python遍历一个目录,输出所有的文件名的实例