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();

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

赞 (0)

相关推荐

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

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

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

  • 一个基于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

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

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

  • 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 文本框使用小结

    1.文本框的改变事件,可使用propertychange,例如: 复制代码 代码如下: $("#txtDataDate").bind("propertychange",function(){ }); 2.获取被选中RadioButton 的值 复制代码 代码如下: var radio_value = $("input[type=radio][checked]").val(); 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对单选框,多选框,文本框等常见操作小结

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

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

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

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

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

  • 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插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

    jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)

    功能:zhou en ce同学最近写了个基于jquery的信息弹出插件showInfoDialog,该插件对背景进行遮罩,然后弹出信息显示框,信息显示种类包括: 一.信息种类说明: 1.1.操作成功信息 1.2.错误信息 1.3.警告信息 1.4.通知信息 二.使用说明 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4

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

    2012年开发人员的16款新鲜的jquery插件体验分享

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

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

    其中有些已经无法访问,或许是文件移除,或许是被封锁.大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们.提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题.并且其中英文插件在转换成中文时注意编码,推荐utf-8.jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File Style.Styling

  • 海量经典的jQuery插件集合

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

  • 基于Jquery插件Uploadify实现实时显示进度条上传图片

    基于Jquery插件Uploadify实现实时显示进度条上传图片

    先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支持单文件或多文件上传,可控制并发上传的文件数 2).在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 3).通过参数可配置上传文件类型及大小限制 4).通过参数可配置是否选择文件后自动

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

    FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

随机推荐