Question

我有一个textarea，允许用户输入16行。我为此目的制定了一个指令，如果用户点击进入，一切正常。

但是我也希望防止超过16行，即使用户没有按Enter键，但是放入一个很长的文本，显示为多行（强制换行）。

这个问题的背景如下：我有一张明信片，用户应该可以在这张明信片上输入文字。明信片有一个固定的宽度/高度。 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无法读取或限制textarea的行数。你最好的机会IMHO使用16个单行输入，并在用户达到每行字符数限制时关注下一行。

Answer 2

试试这个

>>> from random import choice
>>> data=['_','_','A','B','C',1,2,3,4,5]
>>> l = len(data)
>>> data[(l-5):l]
[1, 2, 3, 4, 5]
>>> k = data[(l-5):l]
>>> choice(k)
5
>>> choice(k)
2
>>>

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;
}

Textarea Lines计数

3 个答案: