Question

使readonly textarea符合其内容（无滚动条）的最简单方法是什么？我使用angularjs并且想要纯粹的angualrjs，不想使用jquery。

Answer 1

angular.module("app", [])
    .directive("autoHeight", function () {
    return {
        restrict: "EAC",
        link: function (scope, element, attrs) {
            element[0].style.height = (element[0].scrollHeight < 30) ? 30 + "px" : element[0].scrollHeight + "px";
        }
    };
});

在您的HTML中：

<textarea auto-height> </textarea>

Answer 2

把所有东西放在一起。这会调整文本区域的大小以适应只读案例，同时还可以键入。

angular.module("app", [])
.directive("autoHeight", function ($timeout) {
return {
    restrict: 'A',
    link: function($scope, element) {
      if(element[0].scrollHeight < 30){
          element[0].style.height = 30;
      }else{
          element[0].style.height = (element[0].scrollHeight) + "px";
      }

      var resize = function() {
        return element[0].style.height = "" + element[0].scrollHeight + "px";
      };

      element.on("blur keyup change", resize);
      $timeout(resize, 0);
};});

readonly textarea以使angularjs符合内容

2 个答案: