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

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

在上述指令中，我使用regex允许用户键入定义的字符集中的任何内容以及spl字符和空格，效果很好。

我也在使用ngModel。$ parsers试图将用户输入限制为某些字符限制（在这种情况下为5），因此，如果用户键入的字符超过5，我希望输入停止接受更多字符。在此处应用限制的原因是，我将创建动态列，并基于列名应用每个列的最大长度，因此无法在html中应用限制。

现在问题是maxlength代码附带的，它不能完全按预期工作。

如果看到演示并开始输入超过5个字符，则只要键入第6个字符，光标就会移到第1个字符，并且如果您键入更多字符，则会覆盖现有字符。
由于我想在输入中允许空格，因此如果您键入一些char并添加空格，它将尝试添加＆n b s p;。输入。

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

这是我下面的Codepen演示： https://codepen.io/anon/pen/WKZJWw

是否有解决此问题的投入？

Answer 1

为了允许空格，我只是在设置模型值之前将其删除。因此，在BindingSource函数中：

read

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

    html = html.replace(/&nbsp;/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(); } });是5。但是在粘贴输入或用户快速键入内容的情况下，您仍然必须重新渲染。要解决此问题，请在每次渲染后将插入号的位置设置为输入的末尾。

maxLength

Tim Down向answer提供了有关如何设置插入标记位置的信息。在这种情况下，它定义为

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

查看更新后的codepen

AngularJS：在自定义contenteditable指令中限制用户输入

1 个答案: