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

2014-07-18  来源:本站原创  分类:jquery  人气:20 

这篇文章主要介绍了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" for="form-field-5"> 内容</label>

    <div class="col-sm-9">

        <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea>

    </div>

</div>

复制代码 代码如下:

jQuery.extend({

    textareaAutosize_dc: function() {

        $("textarea").on("keyup", function(e) {

            var currentEnterCount = $(this).val().split("\n").length;

            var lineHeight = Number($(this).css("line-height").replace("px", ""));

            var enterCount = $(this).attr("enterCount");

            if (currentEnterCount < enterCount && enterCount != undefined) {

                //每行减掉固定行高

                $(this).height($(this).height() - lineHeight);

            } else if (currentEnterCount > enterCount) {

                //每行加入固定行高

                $(this).height($(this).height() + lineHeight);

                $(this).attr("enterCount", currentEnterCount);

            }

            //记录当前行高

            $(this).attr("enterCount", currentEnterCount);

        });

    }

});

//调用自动高度

$.textareaAutosize_dc();

以上就是本文的全部内容了,希望大家能够喜欢。

相关文章
  • jquery 插件实现多行文本框[textarea]自动高度 2014-07-18

    这篇文章主要介绍了jquery 插件实现多行文本框[textarea]自动高度,需要的朋友可以参考下 实现功能: 1/当textarea换行时自动增加一行高度 2/当textarea删除一行时 自动减少一行的高度 依赖:jquery.xxx.js 工作中需要使用类似功能但是觉得使用插件需要导入其他文件很不方便所以就写了一个 textarea jquery插件 <div class="form-group"> <label class="col-sm-3 co

  • 5分钟实现多行文本框[textarea]自动高度jquery 插件 2015-03-03

    因为此代码应用中发现在连续回车或者退格的情况下有bug,所以重新写了做了调整,参照新文 [1分钟实现多行文本框[textarea]自动高度jquery 插件] #################################################### ##############以下内容为旧文不建议参考####################### #################################################### <div class="

  • 1分钟实现多行文本框[textarea]自动高度jquery 插件 2015-03-05

    支持初始化加载textarea高度 支持复制文字自动高度 支持长段不换行文字 支持连续回车和连续删除自动高度 <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label> <div class="col-sm-9"> &l

  • jquery 多行文本框(textarea)高度变化 2014-05-03

    这篇文章介绍了多行文本框(textarea)高度变化的操作,有需要的朋友可以参考一下 $(function(){ var $comment = $('#comment'); //获取评论框 $('.bigger').click(function(){ //放大按钮绑定单击事件 if(!$comment.is(":animated")){ //判断是否处于动画 if( $comment.height() < 500 ){ $comment.animate({ height : &q

  • 如何用js实现多行文本框( textarea )内点击回车键但不换行? 2014-01-20

    问题描述: 当做一个聊天界面时,当输入框没有输入时,我们提示用户"内容为空请重新输入"如下图: 此时我用的是,鼠标事件(onclick)触发的"发送按钮",但是我们更希望用按键(key)中的事件触发如:(onkeydown.onkeypress.onkeyup)其中我们选(Enter)键作为触发键, 代码如下: (其中Enter键的keyCody=13): 这时问题出来了:第一次按下(Enter键)会提示"内容为空请重新输入",但这是文本中自动换

  • 海量经典的jQuery插件集合 2013-11-22

    海量经典的jQuery插件帖 可以根据需要选择使用 海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面. 其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们. 猫嗔提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8. jQuery插件-文件上传(File u

  • 经典海量jQuery插件 大家可以收藏一下 2013-12-21

    海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面. 其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们. 提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8. jQuery插件-文件上传(File upload) Ajax File Upload. jQU

  • 2012年开发人员的16款新鲜的jquery插件体验分享 2014-02-10

    jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML;使用这些插件方法可以创建高效强大的网页和Web程序 jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序. 保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天

  • jquery插件珍藏(图片局部放大/信息提示框) 2013-10-04

    本文收藏两种jquery插件:1.图片局部放大2.信息提示框,感兴趣的朋友可以了解下 1.图片局部放大 jQZoom Evolution (演示 | 下载) 2.信息提示框

  • IE下支持文本框和密码框placeholder效果的JQuery插件分享 2014-06-08

    这篇文章主要介绍了IE下支持文本框和密码框placeholder效果的JQuery插件分享,本文给出插件源码和使用示例,需要的朋友可以参考下 很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框. placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 下载地址:http://xiazai.jb51.net/201501/other/

  • input 和 textarea 输入框最大文字限制的jquery插件 2014-07-29

    input 和 textarea 输入框最大文字限制的jquery插件,需要的朋友可以参考下. /* input 和 textarea 最大文字限定插件 * 修改版, 一个中文表示1一个字, 一个英文半个字; * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields * * pass '-1' as speed if you don't want the char-

  • 基于jquery的无限级联下拉框js插件 2015-04-13

    首先声明这2个无刷新级联下拉框的jquery插件完全是自己原创的,经过严格的测试,正确使用不会出现bug 灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,

  • jQuery扁平化风格下拉框美化插件FancySelect使用指南 2015-04-14

    这篇文章主要介绍了jQuery扁平化风格下拉框美化插件FancySelect使用指南,需要的朋友可以参考下 FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项

  • jQuery 插件仿百度搜索框智能提示(带Value值) 2013-10-02

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个,代码给予简单的注释,结构很清晰,很容易看懂,感兴趣的朋友可以了解下 因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个. 直接贴代码. (function($) { var timeid; var lastValue; var options; var c; var d; var t; $.fn.autoComplete =

  • jquery 仿百度搜索下拉框的插件 2015-01-07

    今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出来的值 css .select4_box{border: 1px solid #5897fb;position: absolute;width:250px;background: #fff; border-radius: 4px;-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); box-shadow: 0 4px 5px rgba(0, 0, 0, .15);z-inde

  • 24款非常有用的 jQuery 插件分享 2014-02-03

    jQuery在现在的Web开发项目中扮演着重要角色,jQuery让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象. jQuery以其插件众多.独特.轻量以及支持大规模的网站开发闻名.本文与大家分享24款非常有用的jQuery插件,可以根据您的项目需要来选择使用. 1. jTextTranslate Translate是一款用于快速翻译文章的插件. 2. Uploadify Uploadify是一款用于在你网站集成完全可定制的多文件上传的插件. 3. TopUp 一款非常易用的用于在

  • 2011年12月最新JQuery插件汇总 2012-02-24

    jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册.幻灯片.卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery画廊插件 SmartGallery HTML5 File Uploads with jQuery jQuery图片相册插件 Mosaiqy jQuery网页向导插件 Joyride 仿Facebook的好友选择器 fcbkList

  • 无限树Jquery插件zTree的常用功能特性总结 2013-10-24

    这篇文章主要对无限树Jquery插件zTree的常用功能特性总结,ztree的语法结构是基于key-value的形式配置,需要的朋友可以参考下 其实Ztree官网已经有详细的API文档,一切以官网上的说明为准,我在此只是结合实践总结几条常用的ztree的功能特性. (ztree的语法结构是基于key-value的形式配置) 1:支持异步加载数据 语法配置: async: { enable: true, url:'abc.ashx', otherParam: { "request": &

  • 2013年优秀jQuery插件整理小结 2013-12-25

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等等 今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等等.这些插件的官网都提供了详细的API和相关代码

  • 为你的网站增加亮点的9款jQuery插件推荐 2014-01-06

    如今,jQuery插件众多,满足各种各样的应用需求. 在这篇文章中,我收集了9款很棒的插件,最喜欢的是Sausage内容分页插件,作者想法特别新颖!希望你能从中找到自己需要的插件. Sticky Sidebar这款jQuery可以让你设置浮动的侧栏,当页面滚动的时候能固定的设定的位置,看起来像是粘住了一样.兼容IE6-9及其它主流浏览器. WaypointWaypoints 可以帮助你很容易的实现滚动到某个元素的时候执行某项功能,根据用户拖动滚动条的位置来实现特定的布局模式. Better Ch