Javascript 什么'；这是一个真正的；Angularesque“；在textarea字段上实现maxlength的方法？

我正在编写一个指令，在textarea字段（HTML版本<5）上强制执行maxlength。我用的是AngularJS。因此，我希望以正确的方式完成它。然而，当我按照我的感觉做“Angularesque”时，我不能完全让它工作

(function () {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.controller('MyController', function($scope) {
    $scope.textareaText = "";
});

myAppModule.directive('myMaxlength', ['$compile', '$log', function($compile, $log) {
    return {
        priority: 10000,
        restrict: 'A',
        require: 'ngModel',
        compile: function (elem, attrs) {
            elem.attr("ng-trim", "false");
            return function(scope, linkElem, linkAttrs, ctrl) {
                var maxlength = parseInt(linkAttrs.myMaxlength, 10);
                ctrl.$parsers.push(function (value) {
                    $log.info("In parser function value = [" + value + "].");
                    if (value.length > maxlength)
                    {
                        $log.info("The value [" + value + "] is too long!");
                        value = value.substr(0, maxlength);
                        ctrl.$setViewValue(value);
                        ctrl.$render();
                        $log.info("The value is now truncated as [" + value + "].");
                    }
                    return value;
                });
            };
        }
    };
}]);
})();

这几乎是可行的（请参见JSFIDDLE注意：这个fiddle已经用下面选择的解决方案进行了更新，但是上面的代码仍然显示了这里提到的问题）。它正确地限制进入模型的字符，并将其渲染回显示。但是，可以继续输入空格以超过指定的maxlength。额外的空间不会进入模型，但会使显示混乱。我相信这与ng trim有关。正如您所看到的（在代码片段中），我正在编译函数中设置属性，但到那时已经太晚了。有人建议在compile函数中手动调用compile，以强制AngularJS识别动态添加的属性，但这“出现”是为了创建另一个副本，并不能解决显示问题。将

ng trim=“false”

放在textarea元素上是可行的，但我需要一个干净的解决方案，用户只需添加一个指定最大长度的属性

下面是另一个例子（参见JSFIDDLE），在我看来，这个例子不太像“Angularesque”，但它完成了任务

(function () {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.controller('MyController', function($scope) {
    $scope.textareaText = true;
});
myAppModule.directive('myMaxlength', ['$log', function($log) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var maxlength = parseInt(attrs.myMaxlength, 10);
            $log.info("maxlength=[" + maxlength + "]");
            elem.bind('keydown', function (event) {
                $log.info("elem.val().length=[" + elem.val().length + "]");

                if (elem.val().length >= maxlength)
                {
                    // Void event Except backspace
                    if (event.keyCode != 8){
                        event.preventDefault();
                    }
                }
            });
        }
    };
}]); 
})();

---

那么，在textarea字段上实现maxlength的真正“Angularesque”方法是什么呢？提前谢谢你

您可以在html文件的输入字段上使用ngMaxlength参数（此处的文档：）

比如说

<input type="text" ng-model="myRestrictedText" ng-maxlength="10"/>

---

您可以使用

$attr.$set（）

（请参阅）以

ngModel

可以识别的方式添加

ng trim

属性

在compile函数中更改这一行代码：

elem.attr("ng-trim", "false");

linkAttrs.$set("ngTrim", "false");

为此：

attrs.$set("ngTrim", "false");

注意：记住将属性值更改为camelCase

也可以在链接函数中执行此操作（无需编译函数）：

---

jsfiddle:

@T.J.Crowder-没问题。谢谢你看。我不想在这里创造文字，但我认为Angularesque会让读者准确地了解我想要的是什么。它做到了，非常简洁。：-）不是angularesque，但是，你试过HTML5的textarea

maxlength

属性吗？它似乎正是你想要的。@Fabriciomatté-谢谢，但我必须支持较旧的浏览器，因此不能依赖HTML5。但是…问题是关于

textarea

，而不是

输入

。就在标题里。“还有小提琴。”埃米迪谢谢你，但我已经看过了。在某些只需要验证的情况下，它很有用。但是，我希望在输入无效之前对其进行限制。（见附件）。谢谢本机html maxlength属性使您无法在达到最大值后输入任何文本：这就是您要查找的吗？@emidee再次感谢，但我正在处理一个textarea元素（）。此外，我必须支持较旧的浏览器，这样textarea的新HTML5 maxlength属性就不能满足我的需要。