基于jquery的让textarea自适应高度的插件

Introduction
1. This textarea is like the google calendar's description when you create one new or update one existence calendar;
2. Its height will be changed accroding to user's input;
3. Its scrollbar is removed, which makes it much user friendly. I guess you may like it.

Using the code

1. import the jquery.js and textarea.js
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/textarea.js"></script>

2. add the following css
<style type="text/css">
.autoHeight{border:1px solid #666666; width:300px; height:60px; line-height:20px; font:11px verdana; overflow:hidden;}
</style>

3. add one textare html control
<textarea class="autoHeight" id="textarea1"></textarea>

4. make it works
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(".autoHeight").TextAreaAutoHeight();
});
</script>

赞 (0)

相关推荐

  • Jquery实现textarea根据文本内容自适应高度

    在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,文本框的高度就自动撑高了,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. autoTextarea.js (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:

  • jquery实现textarea 高度自适应

    之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 复制代码 代码如下: jQuery.fn.extend({             autoHeight: function(){                 return this.each(function(){                     var $this = jQuery(this);                     if( !$th

  • 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自适应高度

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

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

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

  • jquery 动态调整textarea高度

    我们修正版本,运行后需要刷新下,因为jquery是外部调用的. jquery事件,动画1 50) { $Content.animate({height:"-=50"},400) } }) }) // --> 缩小 放大 香港.旧金山.台湾.3地7年深度访谈,50余幅经典珍藏海报及剧照,林青霞口中的林青霞,名人好友眼中的大明星.邻家女孩:最善良.最勤奋的亚洲第一美女--跨越国界的铁杆粉丝.日裔资深记者亲访林青霞好友及资深影人徐克夫妇.郁正春.宋存寿.赖声川.杜可风.许鞍华.王晶.张

  • 基于jquery的让textarea自适应高度的插件

    Introduction 1. This textarea is like the google calendar's description when you create one new or update one existence calendar; 2. Its height will be changed accroding to user's input; 3. Its scrollbar is removed, which makes it much user friendly.

  • 基于jQuery实现左右div自适应高度完全相同的代码

    在线演示:http://demo.jb51.net/js/2012/jquery_demo/jquery_div_autoheihet.htm完整代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

  • Vue中textarea自适应高度方案的实现

    目录 隐藏的问题 解决自适应高度的方案 先给方案,Vue栈有需求的同学可以直接下载vue-awesome-textarea 隐藏的问题 抛开原生JS,框架的大部分UI库都支持自适应textarea高度功能,但普遍都忽略了一个功能,就是自适应高度的回显. 使用这些库的时候,我们很容易的在textarea中键入内容,超出范围时会自动延展一行,保证内容高度的自适应.当我们提交内容,在其它页面使用同样的UI来渲染时,麻烦的就来了,有些UI库是不支持自适应回显的,这就需要我们通过行高.行数甚至高度之间的计

  • 基于jQuery实现一个marquee无缝滚动的插件

    基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 git.oschina.net,演示稍后更新(更新到 http://git.oschina.net/mqycn/jQueryMarquee ). 代码如下: /** * 类库名称:jQuery.marquee * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件 * 作者主页:http://www.miaoqiyuan.cn/ * 联系邮箱:mqycn@126.com * 使用说明:http://www.mia

  • javascript原生和jquery库实现iframe自适应高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginh

  • 基于jquery日历价格、库存等设置插件

    基于jquery日历价格、库存等设置插件

    Commodity calendar, price, inventory and other settings of jQuery plug-in 基于jquery的日历价格.库存等设置插件.需要设置的参数(字段)需自定义,详见(demo)使用方法- 源码地址:https://github.com/capricorncd/calendar-price-jquery Create by capricorncd / 2017-06-11 使用方法 <!DOCTYPE html> <html&

  • 基于jQuery全屏焦点图左右切换插件responsiveslides

    基于jQuery全屏焦点图左右切换插件responsiveslides

    基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览    源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,

  • 基于jquery编写的横向自适应幻灯片切换特效的实例代码

    基于jquery编写的横向自适应幻灯片切换特效的实例代码

    复制代码 代码如下: <script type="text/javascript">jQuery(".fullSlide").hover(function() {    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)},function() {    jQuery(this).find(".prev,.next&q

  • 基于jQuery的让textarea支持Ctrl+Z步步撤销功能

    代码相对不多. 主要的是: 复制代码 代码如下: var log = []; $(function () { var txt = window.setInterval(function () { if (log[log.length - 1] != $("#t").val()) { log[log.length] = $("#t").val(); } }, 1500); var isCtrl = false; $(document).keydown(function

随机推荐