javascript - 计算文本区域行数

Question

我有一个文本区域，允许用户输入 16 行。我已经为此目的构建了一个指令，如果用户按 Enter 键，一切都会正常工作。

但我也想防止超过 16 行，即使用户没有按 Enter 键，而是输入很长的文本，该文本会显示为多行(强制换行)。

这个问题的背景是这样的:我有一张明信片，用户应该能够在这张明信片上输入文字。明信片具有固定的宽度/高度。文本区域应代表明信片的固定宽度/高度，以便用户可以看到还剩多少空间可以填写明信片(不超过 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

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