textarea自适应高度

最新推荐文章于 2024-11-05 22:07:06 发布

acb9900

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量116

点赞数

文章标签： javascript shell ViewUI

原文链接：http://www.cnblogs.com/glelaine/archive/2012/07/06/2579444.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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: 140px}

</style>
<script type="text/javascript" src="http://www.css88.com/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
   (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);
</script>
</head>
<body>
<div id="header">

<script language="JavaScript">
function toDesktop(sUrl,sName){
   var WshShell = new ActiveXObject("WScript.Shell");
   var oUrlLink = WshShell.CreateShortcut(WshShell.SpecialFolders("Desktop") + "\\" + sName + ".url");
   oUrlLink.TargetPath = sUrl;
   oUrlLink.Save();
}
</script>
<span onClick="toDesktop('http:\//www.baidu.com/','百度')" style="background:red">添加百度链连到桌面</span>
</div>
<div id="main">
<h1>【jQuery插件】autoTextarea-文本框根据输入内容自适应高度的实例页面</h1>
<div id="body" class="light">
      <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>
        <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">
    $(".chackTextarea-area").autoTextarea({maxHeight:220});
</script>

</body>
</html>