第一天：jquery发布框

最新推荐文章于 2014-01-20 18:43:46 发布

细高

最新推荐文章于 2014-01-20 18:43:46 发布

阅读量503

点赞数

分类专栏： jquery学习文章标签： jquery

本文链接：https://blog.csdn.net/u012315717/article/details/17355835

版权

jquery学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发布框</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<!--
		功能描述：当点击输入框时，提示的文字会去掉；当光标离开时，如果没有输入任何内容，提示的文字会恢复；如果有输入文字，将会计算并显示剩余的字数
	-->
<script type="text/javascript">
	$(function(){
		$("#content").focus(function(){
			if ($(this).val()==this.defaultValue) {
				$(this).val("");
				//alert($(this).length-1);
			}
		}).blur(function(){
			if ($(this).val()=='') {
				$(this).val(this.defaultValue);
			}
		})
		$("#content").keyup(function(){
			//alert($(this).val().length);
			var words_num = 140 - $(this).val().length;
			if (words_num < 0) {
					//被误导了 这样是不会有 return 值的
				//$("font").text(function(words_num){
				//	return "<font color='red'>"+words_num+"</font>";
				//});
				$("font").css('color','red').text(words_num);
			}else{
				$("font").text(words_num);
			//alert(words_num);
			}
		})
	});	
</script>
</head>

<body>
	<fieldset style="width:800px; margin-left:300px;">
		<legend style="font-sixe:16px; font-weight：600">发布框</legend>
		<form action="" method="post" enctype="multipart/form-data">
			您还可以输入<span id="num" style="font-size:28px;font-weight:800"><font color="green">140</font></span>个字 
			<textarea cols="96" rows="8" id="content">随便写点东西吧.</textarea>
			<input type="submit" name="submit" value="发布"/>
		</form>
	</fieldset>	
</body>
</html>