Question

在this question上构建，我正在尝试扩展解决方案以处理包装线和粘贴。我的想法是限制每行的字符数，超出限制的任何字符都将重新组合到一个新行上（为简单起见，我不在乎它是否会将一个单词拆分为两个）。

这是我到目前为止的指令版本：

app.directive('textLimit', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {

      ReformatText();

      function ReformatText() {
        scope.result = scope.textEntry.replace('\n', ' ').match(/.{1,10}/g);

        //scope.textEntry = scope.result.join('\n');

        angular.element(elem).attr("rows", (scope.textEntry).split("\n").length);
      }

      elem.on('keydown', function(event) {
        if (event.keyCode == 13) {
          if ((scope.textEntry || '').split('\n').length > 2) {
            event.preventDefault();
          }
        }
      });

      elem.on('keyup', function(event) {
        ReformatText();
      });
    }
  };
});

See plunk here

我在开始时调用ReformatText（）一次（处理任何预加载的文本），并在每次击键时调用一次。在keydown上，我检查它是否是回车键并且如果已经有超过2个换行符则阻止它 - 然后（不管它是什么键）我想重新处理文本以防万一被输入/粘贴。

我对ReformatText（）的想法大致就是这个

1）用空格替换任何现有换行符 - 如果用户编辑前一行，这些换行符也可能过时，如果他们粘贴的文本符合我在textarea上设置的总限制但有超过2个换行符< / p>

2）将组合后的字符串分解为10个字母的数组（或者我想要的长度限制） - 我遇到了很多方法来执行此操作并选择使用带有正则表达式的.match（）

3）使用.join（）ed数组覆盖原始属性 - 这是失败的部分，如果我取消注释该行的行为不正常。我的猜测是我以某种方式弄乱了绑定。

plunk中的示例输入显示了我正在尝试实现的内容 - 结果是按照我的预期进行格式化，但我无法将其绑定回textarea。

这是一个好方法 - 如果是这样，我错过了什么？ JS和Angular仍然是新手，我已经看到了关于如何做类似事情的各种建议，所以我想知道我是否走在正确的轨道上。

Angular指令 - 限制textarea中的行数和长度

0 个答案: