计算 Textarea 行数

Question

我有一个文本区域，允许用户输入 16 行。我已经为此目的构建了一个指令，如果用户点击回车，一切正常。

但我也想防止超过16行，即使用户没有按回车，而是输入了很长的文本，显示为多行（强制换行）。

这个问题的背景如下：我有一张明信片，用户应该可以在这张明信片上输入文字。明信片具有固定的宽度/高度。 textarea 应该代表明信片的固定宽度/高度，以便用户可以看到他们还剩下多少空间来填写明信片（不超过 16 行）。

用 JS 可以吗？

到目前为止我的代码：

HTML

<textarea placeholder="Enter text" rows="16" ng-trim="false" id="message-textarea" maxlines="16" maxlines-prevent-enter="true"></textarea>

JS 指令

app.directive('maxlines', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      var maxLines = 1;
      attrs.$observe('maxlines', function(val) {
        maxLines = parseInt(val);
      });
      ngModel.$validators.maxlines = function(modelValue, viewValue) {
        var numLines = (modelValue || '').split("\n").length;
        var diffLines = maxLines - numLines;
        scope.$emit('cliked-from-directive-maxlines', {diffLines});
        return numLines <= maxLines;
      };
      attrs.$observe('maxlinesPreventEnter', function(preventEnter) {
        // if attribute value starts with 'f', treat as false. Everything else is true
        preventEnter = (preventEnter || '').toLocaleLowerCase().indexOf('f') !== 0;
        if (preventEnter) {
          addKeypress();
        } else {
          removeKeypress();
        }
      });

      function addKeypress() {
        elem.on('keypress', function(event) {
          // test if adding a newline would cause the validator to fail
          if (event.keyCode == 13 && !ngModel.$validators.maxlines(ngModel.$modelValue + '\n', ngModel.$viewValue + '\n')) {
            event.preventDefault();
          }
        });
      }

      function removeKeypress() {
        elem.off('.maxlines');
      }

      scope.$on('$destroy', removeKeypress);
    }
  };
});

Answer 1

AFAIk 没有办法读取或限制文本区域的行数。恕我直言，您最好的机会是使用 16 个单行输入，并在用户达到每行字符数限制时关注下一行。

Answer 2

试试这个

function addKeypress() {
   var lines = 16;
   elem.on('keypress', function(e) {
        var newLines = elem.val().split("\n").length;
        if(e.keyCode == 13 && newLines >= lines) {
            return false;
        }
    });
  });
}

Answer 3

也许你可以做类似this:

JavaScript

$(".limit").on("input", function(evt) {
  var $limit = $(this);
  var limit = this;
  if($limit.innerHeight() !== limit.scrollHeight) {
    $limit.val($limit.data("before"));
    evt.preventDefault();
    return false;
  } else {
    $limit.data("before", $limit.val());
  }
}).each(function(index, el) {
  $(el).data("before", $(el).val());
});

HTML

<textarea class="limit" rows="10"></textarea>

CSS

.limit {
  max-width: 300px;
  min-width: 300px;
  resize: none;
  overflow: hidden;
}