zoukankan      html  css  js  c++  java
  • jQuery插件——autoTextarea-文本框根据输入内容自适应高度

    这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件-autoTextarea:

    01 (function($){
    02 $.fn.autoTextarea = function(options) {
    03 var defaults={
    04 maxHeight:null,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
    05 minHeight:$(this).height() //默认最小高度,也就是文本框最初的高度,当内容高度小于这个高度的时候,文本以这个高度显示
    06 };
    07 var opts = $.extend({},defaults,options);
    08 return $(this).each(function() {
    09 $(this).bind("paste cut keydown keyup focus blur",function(){
    10 var height,style=this.style;
    11 this.style.height =  opts.minHeight + 'px';
    12 if (this.scrollHeight > opts.minHeight) {
    13 if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
    14 height = opts.maxHeight;
    15 style.overflowY = 'scroll';
    16 else {
    17 height = this.scrollHeight;
    18 style.overflowY = 'hidden';
    19 }
    20 style.height = height  + 'px';
    21 }
    22 });
    23 });
    24 };
    25 })(jQuery);

    调用:

    1 $(".chackTextarea-area").autoTextarea({maxHeight:220});

    查看demo:http://www.css88.com/demo/autoTextarea/

  • 相关阅读:
    重构二叉树
    Nlog、elasticsearch、Kibana以及logstash
    技术
    Java 的垃圾回收机制(转)
    Java并发编程:并发容器之CopyOnWriteArrayList
    深入理解Arrays.sort() (转)
    浅析java的浅拷贝和深拷贝
    gradle
    @action 注解
    如何使用mysql
  • 原文地址:https://www.cnblogs.com/woohblog/p/3147503.html
Copyright © 2011-2022 走看看