zoukankan      html  css  js  c++  java
  • Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文:http://www.yuzi.me/Share/TextAreaHeight.html

    Jquery代码:

    (function($){

      $.fn.autoTextarea = function(options) {

        var defaults={

          maxHeight:null,//文本框是否自动撑高,默认: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);

    调用代码:

    $("textarea").autoTextarea({
            maxHeight:220,//文本框是否自动撑高,默认:null,不自动撑高;如果自动撑高必须输入数值,该值作为文本框自动撑高的最大高度
        })

    注意:调用代码一定是放textarea后面。

    DEMO页面:http://www.yuzi.me/Demo/autoTextArea.html

  • 相关阅读:
    iterm2 配色修改
    让Dock自动 显示/隐藏 不再有延迟
    Xcode更改配色方案
    CocoaPods安装与使用
    CocoaPods安装和使用及问题:Setting up CocoaPods master repo
    CocoaPods安装和使用教程
    RubyGems 镜像
    iOS Mac系统下Ruby环境安装
    MAC机中安装RUBY环境
    Kibana+Logstash+Elasticsearch 日志查询系统
  • 原文地址:https://www.cnblogs.com/yejiao/p/7550315.html
Copyright © 2011-2022 走看看