本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们。

autoTextarea.js

(function($){
$.fn.autoTextarea = function(options) {
var defaults={
maxHeight:null,
minHeight:$(this).height()
};
var opts = $.extend({},defaults,options);
return $(this).each(function() {
$(this).bind("paste cut keydown keyup focus blur",function(){
var height,style=this.style;
this.style.height = opts.minHeight + 'px';
if (this.scrollHeight > opts.minHeight) {
if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
height = opts.maxHeight;
style.overflowY = 'scroll';
} else {
height = this.scrollHeight;
style.overflowY = 'hidden';
}
style.height = height + 'px';
}
});
});
};
})(jQuery);

  

 
demo.js
 $(".doctable textarea").autoTextarea({
maxHeight:400,
minHeight:100
});

Jquery实现textarea根据文本内容自适应高度的更多相关文章

  1. 文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法

    textarea内容可从后台读取或手动输入,常规输入后中文和数字会出现换行问题 <style> #textarea { display: block; margin: 0 auto; ov ...

  2. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. iOS 动态计算文本内容的高度

    关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. //  获取字符串的大小  ios6 - (CGSize)getStringRect_:(NSString* ...

  4. 【原】文本图片自适应高度小bug以及解决办法

    自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中

  5. 文本图片自适应高度小bug以及解决办法

    自定义cell的文本图片自适应高度代码,如果存在自定义的cell赋值封装,就必须将自适应高度代码写在这个方法中 点击效果: 注:- (void)layoutSubviews 方法不能同时操作,否则会出 ...

  6. iframe 随内容自适应高度

    兼容性好的 html代码: <iframe src="enterprise/enter_edit.aspx" id="mainframe" framebo ...

  7. iOS开发-UITextView根据内容自适应高度

    UITextView作为内容文本输入区域,有的时候我们需要根据内容动态改变文本区域的高度,效果如下: 定义UITextView,实现UITextViewDelegate: -(UITextView * ...

  8. IOS UILabel 根据内容自适应高度

    iOS Label 自适应高度  适配iOS7以后的版本 更多 self.contentLabelView = [[UILabel alloc] init]; self.contentLabelVie ...

  9. textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

随机推荐

  1. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  2. git 高级命令

    git bisect 运行git bisect 通常是为了找出某个导致版本库产生倒退或bug的特殊提交 例如:你的版本库已经从一个已知的"好"状态过渡到一个已知的"坏&q ...

  3. Redis集群(一):基本概念

    一.使用版本:3.0.0.0 二.基本概念:  号至 11000 号的哈希槽, 这样集群就不会因为主节点 B 的下线而无法正常运作了. 异步复制(虽然是异步复制,但是执行写命令和复制命令到从节点几乎是 ...

  4. ES6新特性:增加新类型:Symbol

    本文所有Demo的运行环境都为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : ES6新增了一种数据类型:Symbol,Symbol是用来定义对象的唯一属性名的不 ...

  5. 强联通 poj 2762

    t个样例    (注意清零) n个点m条边 有向; 任意2点是否能从a->b或者b->a; Yes  No #include<stdio.h> #include<algo ...

  6. js 身份验证

    var idCardNoUtil = {     provinceAndCitys: {11:"北京",12:"天津",13:"河北",14 ...

  7. 【USACO 2.1】The Castle

    /* TASK: castle LANG: C++ SOLVE: 深搜,注意每个方向对应值.枚举去掉的墙,然后再dfs,注意墙要复原,并且dfs里要判断是否超出边界. */ #include<c ...

  8. GridView联表搜索,排序

    kartik-v/yii2-grid 文档http://demos.krajee.com/grid 在win7下 composer require kartik-v/yii2-grid "@ ...

  9. 59.Android开源项目及库 (转)

    转载 : https://github.com/Tim9Liu9/TimLiu-Android?hmsr=toutiao.io&utm_medium=toutiao.io&utm_so ...

  10. 【poj2459】 Feed Accounting

    http://poj.org/problem?id=2459 (题目链接) 题意 一堆不知何时运到的草料原有F1 kg,在第D天被牛吃成F2 kg,每头牛在[l,r]吃草料,每天吃1kg.求草料是什么 ...