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

时间:2015-08-23 00:52:40

标签: javascript angularjs angular-directive

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仍然是新手,我已经看到了关于如何做类似事情的各种建议,所以我想知道我是否走在正确的轨道上。

0 个答案:

没有答案