jQuery让textarea自适应高度

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
<textarea name="" id="textarea" class="mytest"></textarea>
</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
        //jQuery实现textarea高度根据内容自适应
        $.fn.extend({
          txtaAutoHeight: function () {
                return this.each(function () {
                var $this = $(this);
                      if (!$this.attr(‘initAttrH‘)) {
                         $this.attr(‘initAttrH‘, $this.outerHeight());
                    }
                    setAutoHeight(this).on(‘input‘, function () {
                        setAutoHeight(this);
                   });
                });
                 function setAutoHeight(elem) {
                    var $obj = $(elem);
                    return $obj.css({ height: $obj.attr(‘initAttrH‘), ‘overflow-y‘: ‘hidden‘ }).height(elem.scrollHeight);
                 }
          }
         });

         //调用
         $(function () {
            $(".mytest").txtaAutoHeight();
         });
</script>
</html>

原文地址:https://www.cnblogs.com/liumangdashi/p/8118000.html

时间: 2024-10-09 03:42:03

jQuery让textarea自适应高度的相关文章

div模拟textarea自适应高度

之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着输入行数的增多而增大,于是我上网寻求了下帮助,发现大神张鑫旭的这篇文章<div模拟textarea文本域轻松实现高度自适应>,成功解决我的问题 代码如下: 1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <

textarea自适应高度

最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个textarea,其中一个textarea设置其absolute,设置其不可见.当输入文本的textarea的值变化时,将原本的textarea中的值copy到新的 textarea中,这样可以准确计算高度(注意在copy节点的时候新旧textarea的宽度是一样的). 为什么不直接用原textarea

jquery文本框textarea自适应高度

浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="

textarea 自适应高度,js和angular两个版本

angular 版本---------- pc   移动端都经过测试,没问题 放心用吧! directiveApp.directive('autoHeight', function(){       function autoHeight(elem){           elem.style.height = 'auto';           elem.scrollTop = 0; //防抖动           elem.style.height = elem.scrollHeight +

jquery 实现iframe 自适应高度

超级简单的方法,也不用写什么判断浏览器高度.宽度啥的.下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的.注意别放错地方了哦.iframe代码,注意要写ID <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto&quo

jQuery实现textarea高度根据内容自适应

1 //jQuery实现textarea高度根据内容自适应 2 $.fn.extend({ 3 txtaAutoHeight: function () { 4 return this.each(function () { 5 var $this = $(this); 6 if (!$this.attr('initAttrH')) { 7 $this.attr('initAttrH', $this.outerHeight()); 8 } 9 setAutoHeight(this).on('inpu

Jquery插件----TextArea高度自适应

textArea的高度自适应本来应该很简单的,只需要用js监听它的输入然后修改其高度即可,甚至对于ie只要用css(overflow:visible;)控制就可以了.但是同样会有兼容性问题,用一个jQuery插件来实现.代码如下: $.fn.extend({ textareaAutoHeight: function (options) { this._options = { minHeight: 0, maxHeight: 1000 } this.init = function () { for

Jquery实现 TextArea 文本框根据输入内容自动适应高度

原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能是版面的限制和用户通常只转播或者评论一个短句有关.但是当你输入超过一行文字的时候,TextArea自动适应高度,大大改善了体验,这样用户就可以看到全部的文字.不用再去拖动文本框的滚动条. 如下图: 这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件 - TextArea

jquery iframe取得元素与自适应高度

总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在iframe子页面获取父页面元素 $('#objId', parent.document); 在iframe子页面获取父页面元素 代码如下:  代码如下 复制代码 $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页面的元素代码如下:  代码如