autoTextarea-文本框根据输入内容自适应高度

最新推荐文章于 2024-01-19 10:39:04 发布

axl234

最新推荐文章于 2024-01-19 10:39:04 发布

阅读量160

点赞数

分类专栏： javascript jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/83984712

版权

javascript 同时被 2 个专栏收录

158 篇文章 0 订阅

订阅专栏

jquery

104 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style type="text/css">
.demo { }
.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.float .close-ico { position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; background-image:url(img/close-ico.png); text-indent:-900px; overflow:hidden; }
.float .close-ico:hover { background-position:0 -16px; }
.float p { line-height:22px }
.chackTextarea-area{ line-height: 20px; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial;resize: none; padding: 0;border: 1px solid #CDCDCD; width: 400px; height: 40px}

</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">

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

</script>

<body>

      <div class="demo">
          <h4>这里输入多行文本试试:</h4>
        <div class="chackTextarea">
          <textarea name="textarea" id="textarea" cols="60" rows="4" class="chackTextarea-area"></textarea>

        </div>
        <div class="chackTextarea">
          <textarea name="textarea" id="textarea1" cols="60" rows="4" class="chackTextarea-area"></textarea>
        </div>
      </div>
      <h3>代码</h3>
      <div class="demo">
        <h5>CSS代码：</h5>

        <pre name="code" class="css">
        .chackTextarea-area{ line-height: 20px; font-size: 14px; font-family: "Helvetica Neue", Helvetica, Arial;resize: none; padding: 0;border: 1px solid #CDCDCD; width: 400px; height: 40px}
                </pre>
        <h5>JS代码，默认的参数及调用：</h5>
        <pre name="code" class="js">
        //默认的参数
         $(".chackTextarea-area").autoTextarea({
            maxHeight:220,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度
            minHeight:$(this).height()//默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示
         })

        </pre>
      </div>
    </div>

</div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3448069-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

axl234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
autoTextarea-文本框根据输入内容自适应高度

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8" /&gt;&lt;title&gt;&lt;/title&gt;&lt;link rel="stylesheet" href="../css/demo.css" type="text/css&quo
复制链接

扫一扫