Demo-jQuery获取焦点&文本框大小变化

最新推荐文章于 2021-09-28 14:58:32 发布

_夜风

最新推荐文章于 2021-09-28 14:58:32 发布

阅读量913

点赞数

分类专栏： Jquery学习文章标签： jQuery

本文链接：https://blog.csdn.net/k183000860/article/details/52025236

版权

Jquery学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<meta charset="" />
	<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>

	<style type = "text/css">

		 input:focus {
		
			border:1px solid #f00;
			background: #f00;
		} 


		

	</style>
	

	<script type="text/javascript">

		$(function(){
			
			$(":input").focus(function(){
				$(this.addClass('focus'));
			}).blur(function(){
				$(this.removeClass("focus"));
			});


			var $content = $("#textarea");
			$("div > span:first").click(function(event) {
				
				if($content.height() < 500 && (!$content.is(":animated"))) {
					//$content.height($content.height()+50);
					//
					$content.animate({

						height:"+=50"
					},400);
				}
			});

			$("div > span:last").click(function(){

				if($content.height() > 50) {

					$content.animate({

						height:"-=50"
					},400)
				}
			});

		});
		
	</script>
</head>
<body>
	
	<div>
		
		<form name="form1" id="form1" action="" method="post">
			
			<fieldset>
				
				<legend>个人信息</legend>

				<div>
					
					<label for="username">name:</label>
					
					<input id="username" type="text"></input>					


				</div>

				<div>
					
					<label for="pass">password:</label>
					<input id="pass" type="password"></input>

				</div>

				<div></div>

			</fieldset>

			<div>
				<div>
					<span>bigger</span>
					<span>smaller</span>
				</div>

				<div>
					
					<textarea id="textarea" rows="8" cols="12">testtesttesttesttesttesttesttesttesttesttesttesttesttest</textarea>
				</div>

			</div>

		</form>
	</div>

</body>
</html>

_夜风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Demo-jQuery获取焦点&文本框大小变化

test input:focus { border:1px solid #f00; background: #f00; } $(function(){ $(":input").focus(function(){ $(this.addClass('focus')); }).blur(functi
复制链接

扫一扫