jQuery学习笔记——文本框的应用

最新推荐文章于 2023-03-14 13:40:30 发布

jsfantasy

最新推荐文章于 2023-03-14 13:40:30 发布

阅读量374

点赞数

分类专栏： jQuery 文章标签： jquery addClass animated input fieldset

本文链接：https://blog.csdn.net/november_chopin/article/details/77662733

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--
	作者：1377378268@qq.com
	时间：2017-08-29
	描述：当输入框获得焦点时，给输入框增加一个样式
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单行文本的应用</title>
		<style type="text/css">
			.focus{
				border: 1px solid #f00;
				background: #fcc;
			}
		</style>
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(":input").focus(function(){
					$(this).addClass("focus");
				}).blur(function(){
					$(this).removeClass("focus");
				});
			})
		</script>
	</head>
	<body>
		<form action="#" method="post" id="regForm">
			<fieldset>
				<legend>个人基本信息</legend>
				<div id="">
					<label for="username">名称</label>
					<input id="username" type="text" />
				</div>
				<div id="">
					<label for="pass">密码</label>
					<input type="text" name="username" id="username" />
				</div>
				<div id="">
					<label for="msg">详细信息</label>
					<textarea id="msg" rows="" cols=""></textarea>
				</div>
				
			</fieldset>
		</form>
	</body>
</html>

效果：

多行文本框的应用：

<!--
	作者：1377378268@qq.com
	时间：2017-08-29
	描述：实现用按钮控制滚动条的滚动
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多行文本应用</title>
		<style type="text/css">
			* { margin:0; padding:0;font:normal 12px/17px Arial; }
			.msg {width:300px; margin:100px; }
			.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
			.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
			.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

		</style>
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
			    var $comment = $('#comment');//获取评论框
			    $('.up').click(function(){ //向上按钮绑定单击事件
				   if(!$comment.is(":animated")){//判断是否处于动画
						$comment.animate({ scrollTop  : "-=50" } , 400);
					}
				})
				$('.down').click(function(){//向下按钮绑定单击事件
				   if(!$comment.is(":animated")){
						$comment.animate({ scrollTop  : "+=50" } , 400);
					}
				});
				
			});
  

		</script>
	</head>
	<body>
		<form action="" method="post">
			<div class="msg">
				<div class="msg_caption">
					<span class="up" >向上</span>
					<span class="down" >向下</span>
				</div>
				<div>
					<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
				</div>
			</div>
		</form>
	</body>

</html>

运行效果：