`
Everyday都不同
  • 浏览: 722414 次
  • 性别: Icon_minigender_1
  • 来自: 宇宙
社区版块
存档分类
最新评论

模仿新浪微博字数限制提示

阅读更多
 

 本人很喜欢上微博,出于职业病的原因,往往对微博字数限制的功能实现感兴趣。虽说实现该功能不算太难,但是想跟做是两回事儿,于是我就有了模拟新浪微博字数限制功能实现的想法!

 

实现过程以及解决出现的问题特此记录一下:

 

输入页面:

<table style="WIDTH: 100%; BORDER-COLLAPSE: collapse"  cellSpacing=0 rules=all  border=0  class="tb_datalist">
  	<span id="inputTip"><font color="red">*你还能输入140个字</font></span> 
  	<tr>
  		<textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()"></textarea>
   	</tr> 
   	<input id="btn" type="submit" value="发布" disabled="disabled" />
  </table>

 

 

js:

function textCounter() {
	var msg = $("#input").val();
	var length = 0;
	if(msg == "") {
    	   $("#inputTip").html("*你还能输入140个字").css({color:"red"});
           $("#btn").attr("disabled", true);
           return;
        }
	for(var i=0; i<msg.length; i++) {
	//中文及中文标点算2个字符
	   if(msg.charCodeAt(i) > 255) {
		length += 2;
	   }else{
		length ++;
	   }
	}
	var count;
	//字数在合理范围时,提示信息为用户还能输入的字数,"发布"按钮可用
	if(length>0 && length<=140) {
	   count = 140 - length; 
	   $("#inputTip").html("*你还能输入"+count+"个字").css({color:"red"});
	   $("#btn").attr("disabled", false);
	}		
        //超出限定字数时,"发布"按钮不可用,提示信息改变
	if(length > 140) {
	  //alert("length:" + length);
	  count = length - 140; 
	  $("#inputTip").html("*超过"+count+"个字").css({color:"red"});
	  $("#btn").attr("disabled", true);
	}
}

 出现的问题:

1)使用jQuery动态改变提示信息时,用$("#inputTip").innerHTML("<font color="red">xxx</>")无效,后来发觉这是原始js的写法,遂改成$("#inputTip").html("xxx").css(" "," ")的写法,达到了改变提示文本的效果;

 

2)初始光标位置不在顶格,发现原来的textarea写成这样:

<textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()">
</textarea>

 即textarea的开始和结束标签换行了,应该写在同一行:

 

<textarea id="input" rows="5" cols="35" onKeyDown="textCounter()" onKeyUp="textCounter()"></textarea>

 才不会出现这个问题!

 

 

3)js代码中if(msg == "") return;
必须加上,因为初始状态是没有任何输入的,如果没有此判断,直接进行for循环会出错!

 

实现效果:

初始状态:

 

字数未超出限制状态:

 

字数超出限制状态:

  • 大小: 2 KB
  • 大小: 2.9 KB
  • 大小: 5.3 KB
分享到:
评论

相关推荐

    Android模仿新浪微博

    在Android平台上模仿新浪微博的开发是一项综合性的任务,涵盖了多个Android开发的关键知识点。下面将详细解析这一过程中的核心技术和实现步骤。 一、用户界面设计与布局 1. XML布局:使用XML文件来定义各个屏幕组件...

    模仿新浪微博的个人微博

    在本项目中,我们主要探讨的是如何模仿新浪微博创建一个个人微博系统。这个系统采用Java Web技术栈进行开发,包括jsp(JavaServer Pages)、servlet和javabean,同时利用MySQL作为后端数据库来存储和管理数据。下面...

    模仿新浪微博随便看看栏目

    本项目以“模仿新浪微博随便看看栏目”为主题,旨在实现一个类似的功能,让用户能够轻松浏览各种信息。在这个过程中,我们会重点讨论如何利用ListView组件进行自定义,以达到美观且功能丰富的效果。 ListView是...

    ios_模仿新浪微博客户端

    在本文中,我们将深入探讨如何在iOS平台上模仿新浪微博客户端的开发。这是一份经典的教学教程,旨在帮助开发者理解和实现类似微博应用的核心功能。我们将主要关注以下几个方面:界面设计、网络请求、数据解析、用户...

    iOS图文混排(模仿新浪微博)

    本Demo采用富文本结合正则表达式实现UITableVIew上的图文混排及布局,提供超链接、@、$等功能,完全模仿新浪微博的功能,在数据请求上使用了AFJSONRequest,也使用了图片的异步加载,性能良好,值得学习。

    jquery高仿新浪微博图片显示插件

    首先,我们需要理解这款插件的核心理念:模仿新浪微博的图片展示模式。新浪微博的图片加载机制以用户体验为中心,通过延迟加载、预加载和响应式布局等技术,确保图片在不同设备和网络环境下都能快速、流畅地展现。这...

    Android模仿新浪微博(主页微博,评论界面)文字教程.txt

    android仿微博首页

    ios-模仿新浪微博App首页展开按钮.zip

    【标题】:“ios-模仿新浪微博App首页展开按钮.zip”揭示的是一个iOS开发中的特定功能实现,即模拟新浪微博应用中首页的展开按钮效果。这个压缩包可能包含了一个iOS开发者为了重现微博应用中的交互设计而编写的代码...

    模仿新浪微博界面Fragment应用

    "模仿新浪微博界面Fragment应用"这个项目旨在帮助新手和入门开发者理解如何在Android应用中实现类似微博客户端的底部菜单导航功能,并熟练掌握Fragment的使用。下面将详细阐述Fragment的基本概念、作用以及如何在...

    ios-模仿新浪微博的tabbar的OptionButton.zip

    这个"ios-模仿新浪微博的tabbar的OptionButton.zip"项目,通过一行代码就能帮助开发者快速实现这一功能。该项目基于GitHub上的开源库QYOptionButton,作者是Qiuny。 QYOptionButton是一个轻量级的库,专门用于创建...

    jQuery仿照新浪微博提示框(确认框)

    总的来说,"jQuery-smoothConfirm"插件是利用jQuery和CSS实现的一个模仿新浪微博提示框效果的组件。通过这个插件,开发者可以为他们的网页增添更加友好和动态的用户交互体验。通过学习和理解这个插件的工作原理,...

    java swing 模拟新浪微博

    简单的java swing 编写的新浪微博用户登陆客户端。 在本地运行时,需要自己修改config.properties中client_ID和client_SERCRET属性的值。这两个值需要自己通过注册得到。

    仿新浪微博php程序xweibo

    本文将深入探讨一个基于PHP开发的项目——XWeibo,这是一款旨在模仿中国知名社交媒体平台新浪微博的程序。通过分析XWeibo的源码,我们可以学习到PHP开发的一些关键技术和实践。 1. **PHP基础应用** XWeibo的实现离...

    简单的仿新浪微博发布框

    2. **CSS样式**:通过CSS来模仿新浪微博的UI设计,包括颜色、字体、布局等,使发布框与原版保持一致。 3. **jQuery选择器**:利用jQuery的选择器,如`$("#id")`或`$(".class")`,来选取页面上的特定元素。 4. **...

    高仿新浪微博个人主页html网站模板

    高仿新浪微博个人主页html网站模板

    模仿-闪动-新浪微博发布框~

    这个名为“模仿-闪动-新浪微博发布框”的项目,显然旨在复制新浪微博发布框的功能和视觉效果,并且添加了一些额外的特性,如颜色变化和闪动效果。下面将详细讨论相关知识点。 首先,我们关注的是“html附带代码”这...

    新浪微博逆向总结4-22.docx

    【Android逆向技术详解——以新浪微博为例】 在Android应用逆向工程中,主要目标是对应用程序进行分析,理解其内部逻辑,获取敏感信息或实现特定功能。在这个案例中,我们将聚焦于如何逆向新浪微博的账户登录验证...

    ios-仿新浪微博新消息提示条.zip

    在本例中,"TopNewView"是模仿新浪微博新消息提示条的弹出视图,它会在用户刷新或有新消息时从顶部滑入,展示相关信息。 2. **UIScrollView**: UIScrollView是iOS中的一个基础组件,用于显示可滚动的内容。在这个...

    基于jQuery的模仿新浪微博ajax动态删除消息代码.zip

    在“基于jQuery的模仿新浪微博ajax动态删除消息代码.zip”这个压缩包中,我们可以预见到它包含了一个实现类似新浪微博的动态删除功能的示例代码。这个功能的核心在于使用Ajax进行无刷新的数据更新,以提供更好的用户...

Global site tag (gtag.js) - Google Analytics