jQuery动态改变多行文本框高度的方法

本文实例讲述了jQuery动态改变多行文本框高度的方法。分享给大家供大家参考，具体如下：

<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="jquery-1.7.2.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>

运行效果图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 一个基于jquery的文本框记数器

    复制代码 代码如下: /* *长度跟踪器 *v2.1.0 *bind2Id:用于显示长度变化的元素的id *max:最大长度 *msgWrap:提示信息(必须要有一个"-"占位符) *eg:$('#input').lenTracer({bind2Id:'myTracer',max:150,msgWrap:'您还可以输入-个字符'}); *author:liujg1015@gmail.com */ (function ($) { var zw_validate = function (e

  • 基于jQuery的计算文本框字数的代码

    基于jQuery的计算文本框字数的代码

    一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动 二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背

  • Jquery实现仿新浪微博获取文本框能输入的字数代码

    Jquery实现仿新浪微博获取文本框能输入的字数代码

    limit.js代码 复制代码 代码如下: //txt:文本框jquery对象 //limit:限制的字数 //isbyte:true:视limit为字节数:false:视limit为字符数 //cb:回调函数,参数为可输入的字数 function InitLimit(txt,limit,isbyte,cb){ txt.keyup(function(){ var str=txt.val(); var charLen; var byteLen=0; if(isbyte){//原文博客:blog.c

  • jquery实现文本框textarea自适应高度

    浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="

  • jquery对单选框,多选框,文本框等常见操作小结

    一.文本框.单选按钮.复选框.相关操作 复制代码 代码如下: var sex=$("input[name='sex']:checked").val();   //获取一组radio被选中项的值  var item=$("#sel option:selected").text();      //获取select被选中项的文本  var option_num=$('#sel').val();                 //获取select项目索引 $("

  • JQuery 文本框使用小结

    1.文本框的改变事件,可使用propertychange,例如: 复制代码 代码如下: $("#txtDataDate").bind("propertychange",function(){ }); 2.获取被选中RadioButton 的值 复制代码 代码如下: var radio_value = $("input[type=radio][checked]").val(); 3.下拉列表的改变事件,以及获得选中选项的值 复制代码 代码如下: $

  • js/jquery获取文本框输入焦点的方法

    方法一. 复制代码 代码如下: function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;          

  • jquery 插件实现多行文本框[textarea]自动高度

    实现功能: 1/当textarea换行时自动增加一行高度 2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写了一个 textarea jquery插件 复制代码 代码如下: <div class="form-group">     <label class="col-sm-3 control-label no-padding-right" f

  • jquery 多行文本框(textarea)高度变化

    复制代码 代码如下: $(function(){     var $comment = $('#comment');  //获取评论框      $('.bigger').click(function(){ //放大按钮绑定单击事件         if(!$comment.is(":animated")){ //判断是否处于动画            if( $comment.height() < 500 ){                  $comment.animate

  • jQuery动态改变多行文本框高度的方法

    jQuery动态改变多行文本框高度的方法

    本文实例讲述了jQuery动态改变多行文本框高度的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框高度变化</title> <style type="text/css"> * { margin: 0

  • jquery动态改变onclick属性导致失效的问题解决方法

    复制代码 代码如下: <li id="" onclick =""></li> 虽然在很多时候,都是非常不推荐这样写的,但是还有有些时候会碰到这样的代码. 那么你可能在某些时候需要去修改onclick 的属性如下: 复制代码 代码如下: $("#id").attr("onclick",url); 这样的代码,在chrome和firefox 中可以得到你想要的结果. 遗憾的是在ie中,至少是ie7 以下是没

  • jquery动态改变div宽度和高度

    完整代码: 复制代码 代码如下: <!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> <title>jque

  • jQuery动态移除和添加背景图片的方法详解

    本文实例讲述了jQuery动态移除和添加背景图片的方法.分享给大家供大家参考,具体如下: 利用jQuery移除和添加图片 1.样式 <style type="text/css"> .changeImage{ background:url(images/right.png) no-repeat center; } </style> 2.JS (1)在改变标签的样式,需要移除之前添加的样式 $("#tab tr").find("td&q

  • jQuery动态创建元素以及追加节点的实现方法

    我们知道js中有三种动态创建元素的方法,jQuery中也可以动态的创建元素 例如: var str = $("<a href='http://www.jb51.net'>我们</a>"); $("ul").append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素,位置),在jQuery中是 append 追加在父元素的最后一个子

  • JQuery Mobile 弹出式登录框的实现方法

    JQuery Mobile 弹出式登录框的实现方法

    <a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a> <div data-role="popup" id="login" data-theme="a"> <form style="padding

  • jQuery设置指定网页元素宽度和高度的方法

    本文实例讲述了jQuery设置指定网页元素宽度和高度的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("

  • jquery 动态增加,减少input表单的简单方法(必看)

    html代码如下 <html> <tr><button style="margin-left:10px" class="add_field_button btn">Add</button></tr> <tbody class="input_fields_wrap"></tbody> </html> js代码如下 <script> var m

  • jQuery动态移除与增加onclick属性的方法详解

    本文实例讲述了jQuery动态移除与增加onclick属性的方法.分享给大家供大家参考,具体如下: 这里给大家介绍利用jquery的removeAttr与attr事件来给a标签增加与删除onclick事件的具体操作方法,有需要了解的朋友可参考. 要实现效果:点击链接先去掉onclick属性,3秒后再自动加上该标签中的onclick属性 jQuery中,针对标签属性的操作都是使用attr()方法来实现的,比如:$("a").attr("onclick")可获得a标签的

  • jquery动态添加带有样式的HTML标签元素方法

    如下所示: <table class="exhibit_table" style="font-size:13px; text-align:left;"> <tr> <td style="width:80px;" align="right">上传计划单</td> <td style="padding:10px;"><input type=&qu

随机推荐