AngularJS:限制自定义 contenteditable 指令中的用户输入

Question

在这里使用angular js:

我有一个 HTML 表格，每行数据都使用 contenteditable，例如:

<td contenteditable="true" 
    ng-repeat="column in targetTable.columns"
    ng-model="r[column.id]"
    ng-blur="!r.id? addNewRow(r[column.id], r): undefined">
</td>

我也有我的指令:

directive('contenteditable', ['$sce', function($sce) {
    return {
      link: function(scope, element, attrs, ngModel) {

        var regex =   /^[\w/\s_~`!@#$%^&*()_+-={}[\]|\:;/>\\\'\"]$/;      
        element.on('keypress', (e) => {
            char = String.fromCharCode(event.which);
            if (!regexpInt.test(char)) {
                event.preventDefault();
            };         
        });

        ngModel.$parsers.push(function (value) {
           if (value.length > 5) {
             value = value.substr(0, 5);
             ngModel.$setViewValue(value);
             ngModel.$render();
           }
           return value;
        });
      }
    }
});

我只是发布指令中的相关代码。完整的工作代码可以在下面的代码笔中看到。

在上面的指令中，我使用正则表达式来允许用户键入定义的字符集中的任何内容以及 spl 字符和空格，这工作正常。

我也在使用 ngModel.$parsers 试图将用户输入限制在特定字符限制(在本例中为 5 个)，因此如果用户输入超过 5 个，我希望输入停止接受更多字符。在这里应用限制的原因是我将创建动态列，并根据列名应用每个列的最大长度，因此我无法在 html 中应用限制。

现在问题出在 maxlength 代码上，它的工作方式与预期不完全一样。

• 如果您看到演示并开始输入超过 5 个字符，当您输入第 6 个字符时，光标会立即移至第 1 个字符，并且如果您输入更多字符，则会继续覆盖现有字符。

  <

• 由于我想在输入中留出空格，如果您键入一些字符并添加空格，它会尝试添加 & n b s p;到输入。

我想从 maxlength 代码中得到的是，它应该接受空格，并且一旦您尝试输入超过 5 个字符，它就会阻止用户输入并自行停止。类似于正则表达式代码。

这是我下面的代码笔演示: https://codepen.io/anon/pen/WKZJWw

有任何解决此问题的意见吗？

Answer 1

为了允许空格，我会在设置模型值之前将其删除。所以在read函数中:

    html = html.replace(/ /g, ' ')
    ngModel.$setViewValue(html);

要限制字符，为什么不在按键功能中停止输入

   element.on('keypress', (e) => {
      char = String.fromCharCode(event.which)
      if (!regex.test(char)) {
        event.preventDefault();
      }

      if (ngModel.$viewValue && ngModel.$viewValue.length >= maxLength) {
            event.preventDefault();
      }
   });

其中 maxLength 为 5。但是在粘贴输入或用户输入速度非常快的情况下，您仍然需要重新渲染。要解决此问题，请在每次渲染后将插入符号的位置设置为输入的末尾。

  ngModel.$render = function() {
    element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
    var caretPosition = (ngModel.$viewValue && ngModel.$viewValue.length) || 0;
    setCaretPosition(caretPosition);
  };

归功于此 answer Tim Down 介绍了如何设置插入符位置。在这种情况下，它被定义为

    var setCaretPosition = function(position) {
        if (!element[0].childNodes[0]) {
              return;
        }
        var range = document.createRange();
        var selection = window.getSelection();
        range.setStart(element[0].childNodes[0], position);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
    };

查看更新 codepen