如何建立一个自动高度文本区域

how to build a auto height textarea

本文关键字：文本 区域 一个 高度 何建立 建立      更新时间：2023-09-26

我想让textarea的高度等于其中文本的高度(即使在第一次渲染时调整大小并按回车键确认)…

该页面的代码如下所示。如有任何帮助或指点，我将不胜感激。

= = =

resizeTextarea.js 

app.directive('resizeTextarea', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: "<textarea placeholder='please fill in...'></textarea>",
    link: function(scope, element, attrs) {
      var HEIGHT = 25;
      var el = angular.element(element[0])
      el.css('lineHeight', HEIGHT + "px");
      el.css('height', HEIGHT + "px");
      var resize = function(e) {
        var textHeight = e.target.scrollHeight;
        var height = ~~(textHeight / HEIGHT) * HEIGHT
        el.css('height', height + "px");
      };
      el.on('input', resize);
    }
  }
});

= = =

index . html 

<div>
  <resize-textarea></resize-textarea>
</div>

resize()。使用scrollHeight获取textarea的滚动高度

var resize = function (e) {
    el.css({
        'height': 'auto',
        'height': this.scrollHeight + 'px' // Get the scroll height of textarea
    });
};
el.on('input', resize);

Thanks to https://stackoverflow.com/a/5346855/2025923

希望它能起作用。检查一下jsfiddle。文本区域将自动增长，并在限制(高度)后，它将显示滚动。当你按退格键或删除所有文本时，它会缩小到原来的大小。

chekc this following link:
https://jsfiddle.net/xwkw3a2r/1/

我将使用几行代码创建一个自动调整大小的文本区域:

$(document).ready(function () {
    $('textarea').keypress(function () {
        var scroll = $('textarea').scrollTop();
        if (scroll > 0) {
            $('textarea').height($('textarea').height() + scroll);
        }
    });
});

JSFiddle demo here

试试这个…这将有助于…ok

var app = angular.module('myApp', []);
app.controller('AppCtrl', ['$scope', '$http', '$timeout',
  function($scope, $http, $timeout) {
    // Load the data
    $http.get('http://www.corsproxy.com/loripsum.net/api/plaintext').then(function(res) {
      $scope.loremIpsum = res.data;
      $timeout(expand, 0);
    });
    $scope.autoExpand = function(e) {
      var element = typeof e === 'object' ? e.target : document.getElementById(e);
      var scrollHeight = element.scrollHeight - 60; // replace 60 by the sum of padding-top and padding-bottom
      element.style.height = scrollHeight + "px";
    };
    function expand() {
      $scope.autoExpand('TextArea');
    }
  }
]);
body {
  background: #43434B;
  padding-top: 100px;
}
textarea {
  height: auto;
  max-width: 600px;
  color: #999;
  font-weight: 400;
  font-size: 30px;
  font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  line-height: 2em;
  border: none;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  padding: 30px;
  -webkit-transition: height 2s ease;
  -moz-transition: height 2s ease;
  -ms-transition: height 2s ease;
  -o-transition: height 2s ease;
  transition: height 2s ease;
}
* {
  -webkit-font-smoothing: antialiased !important;
}
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css'>
<div ng-app="myApp">
  <div ng-controller="AppCtrl" align="center">
    <textarea id="TextArea" ng-model="loremIpsum" ng-keyup="autoExpand($event)" placeholder="This is an auto expanding textarea with just angularjs ... try typing something.">
    </textarea>
  </div>
</div>
参考:http://codepen.io/kpourdeilami/pen/KDepk

相关文章：