首页 > 其他分享 >JQ 多行文本框高度变化

JQ 多行文本框高度变化

时间：2023-06-26 20:05:00浏览次数：48  
标签：多行 comment 高度 JQ 文本框 height 变化 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var $comment = $('#comment'); //获取评论框
	$('.bigger').click(function(){ //放大按钮绑定单击事件
		if( $comment.height() < 500 ){ 
			$comment.height(  $comment.height() + 50 ); //重新设置高度，在原有的基础上加50
		}
	})
	$('.smaller').click(function(){ //缩小按钮绑定单击事件
		if( $comment.height() > 50 ){
			$comment.height( $comment.height() - 50 ); //重新设置高度，在原有的基础上减50
		}
	});
});
</script>
</head>
<body>
<form action="" method="post">
    <div class="msg">
        <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
    </div>
</form>
</body>
</html>

效果图：

JQ 多行文本框高度变化_javascript


 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	var $comment = $('#comment');  //获取评论框
	$('.bigger').click(function(){ //放大按钮绑定单击事件
		if(!$comment.is(":animated")){ //判断是否处于动画
			if( $comment.height() < 500 ){ 
				$comment.animate({ height : "+=50" },400); //重新设置高度，在原有的基础上加50
			}
		}
	})
	$('.smaller').click(function(){//缩小按钮绑定单击事件
		if(!$comment.is(":animated")){//判断是否处于动画
			if( $comment.height() > 50 ){
				$comment.animate({ height : "-=50" },400); //重新设置高度，在原有的基础上减50
			}
		}
	});
});
</script>
</head>
<body>
<form action="" method="post">
    <div class="msg">
        <div class="msg_caption"> <span class="bigger" >放大</span> <span class="smaller" >缩小</span> </div>
        <div>
            <textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
        </div>
    </div>
</form>
</body>
</html>

效果图：

JQ 多行文本框高度变化_javascript_02


 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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-1.10.1.min.js" type="text/javascript"></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>

效果图：

JQ 多行文本框高度变化_javascript_03


 

 

 

标签：多行,comment,高度,JQ,文本框,height,变化
From： https://blog.51cto.com/u_16171388/6557273

相关文章

  • JQ 下拉框左右选择
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="text/css">*{ margin:0; padding:0;}div.centent{ float:left; text-......
  • JQ 表格展开伸缩
    style.csstable{border:0;border-collapse:collapse;}td{font:normal12px/17pxArial;padding:2px;width:100px;}th{font:bold12px/17pxArial;text-align:left;padding:4px;border-bottom:1pxsolid#333;width:100px;}.parent{background:#FFF38F;cursor:point......
  • JQ 瀑布流
    demo.css*{ padding:0; margin:0;}.wrap{ position:relative;}.box{ position:absolute; left:0; top:0; width:250px;}.boximg{ width:250px;} demo.js$(function(){ $('img').load(function(){ varbox=$('.box'); var......
  • JQ 可展开折叠的导航
    <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{padding:0;margin:0;}li{list-style-type:none;}body{margin:50px;font-family:\5FAE\8F6......
  • JQ 拖拽
    <!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>拖拽</title><style>*{ padding:0; margin:0;}div{ width:100px; height:100px; background:#f00; cursor:pointer; ......
  • JQ 放大镜
    zoom.css*{ padding:0; margin:0;}li{ list-style-type:none;}.zoom{ margin:50px; position:relative;}.zoomMiddle{ border:1pxsolid#ccc; width:300px; height:300px; margin-bottom:3px; position:relative;}.zoomMiddleimg{ width:300p......
  • JQ 表格内容过滤
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><linkrel="stylesheet"type="text/css"href="css/style.css"/><sc......
  • JQ 可见性过滤选择器
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><!--引入jQuery--><scriptsrc="js/jquery-1.10.1.min.js"type="text/javascript&q......
  • JQ 隔行变色
    <html><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scripttype="text/javascript">window.onload=function(){//页面所有元素加载完毕 varitem=do......
  • jQuery源码浅谈系列---$.attr()
    attr()   1、attr(name)     取得第一个匹配元素的属性值。如果元素没有相应的属性，则返回undefined。  2、attr(properties)     将一个"名/值"形式的对象设置为所有匹配元素的属性。    注：要设置class属性，必须用'className'作为属性名。     举例：......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99