基于jQuery实现仿微博发布框字数提示

2024-02-26 15:56:01

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);
    }
  });
  })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生JavaScript制作微博发布面板效果

javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件动态添加元素,获取设置动态属性基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s
基于jquery DOM写的类似微博发布的效果

复制代码代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>微博发布jq版</title> <meta name="Keywords" content=""> <meta name="Description" content="">
JS实现仿新浪微博发布内容为空时提示功能代码

本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:
使用新浪微博API的OAuth认证发布微博实例

继续前面的文章<新浪微博OAuth认证和储存的主要过程详解>,现在我们就使用它来发布微博. 我们已经将用户新浪微博的oauth_token和oauth_secret保存到 $_SESSION['oauth_token']=$result['oauth_token']; $_SESSION['oauth_secret']=$result['oauth_secret']; 里面,现在要做的就很简单了··就是调用sinaOauth的类进行发布.. 代码如下: //Statuses/update $c
基于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
JavaScript仿微博发布信息案例

现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;
PHP+Mysql+jQuery实现发布微博程序 php篇

先还是要说明本例的业务流程: 1.前端用户输入内容,并对输入的内容字数进行实时统计. 2.用户提交数据,jQuery实现通过Ajax向后台发送数据. 3.后台PHP接收提交表单的数据,并对数据进行必要的安全过滤. 4.后台PHP连接Mysql数据库,并将提交过来的表单数据写入到相应的数据表中. 5.后台向返回成功结果数据内容,并通过Ajax将返回的数据内容插入到前端页面中. 上述1.2步在前篇文章:jQuery篇已讲解了,本文将完成剩余的散步. 效果图: 数据表首先我们要准备一个数据表,表结构
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
JS实现模仿微博发布效果实例代码

效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码代码如下: <head runat="server"> <title></title> <style type="text/css"> * { margin: 0;
PHP+Mysql+jQuery实现发布微博程序 jQuery篇

该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中.我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作. 首先查看示例:DEMO XHTML 复制代码代码如下: <form id="myform" action="" method="post"> <h3><span class="counter">140</span>说说你正

基于jQuery实现仿微博发布框字数提示

相关推荐

随机推荐