在这里使用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个字符，并且如果您键入更多字符，则会覆盖现有字符。
由于我想在输入中允许空格，因此如果您键入一些char并添加空格，它将尝试添加＆nbsp;。输入。
我从maxlength代码中想要的是，它应该接受空格，并且当您尝试键入超过5个字符时，它将阻止用户键入并自行停止。类似于正则表达式代码。
这是我下面的Codepen演示：https ://codepen.io/anon/pen/WKZJWw
有任何解决此问题的投入吗？
为了留出空间，我只是在设置模型值之前将其删除。因此在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);
};
幸得此答案由Tim下如何设置插入符位置。在这种情况下，它定义为
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);
};
查看更新的代码笔
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句