如何防止在textarea中间输入的字符由于最大长度而删除字符

时间:2015-03-31 11:05:02

标签: angularjs angularjs-directive

在AngualrJS中实现maxlength样式指令时,可以在文本框的中间键入一个字符 - 这会导致指令触发并且总字符串被截断为最大长度 - 但是,因为新字符在丢失的角色不是刚输入的那个。

myAppModule.directive('myMaxlength', ['$compile', '$log', function($compile, $log) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            attrs.$set("ngTrim", "false");
            var maxlength = parseInt(attrs.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;
            });
        }
    };
}]);

这个小提琴(不是我的)显示了这样一个使用指令:

http://jsfiddle.net/ksevksev/J7MJF/

要重现,只需在中间键入一个字母,然后查看输出模型的更改。这里所希望的行为是,如果内容已经处于maxlength,则阻止用户在文本区域中键入其他字符 - 即该指令的行为应与MaxLength属性在Firefox / Chrome中的工作方式相同

有没有办法连接AngularJS指令,以便我们可以检测字符是在末尾还是在中间添加并相应地截断?我不确定如何在指令中访问模型的原始值,但这至少可以进行一些比较

(我知道在Chrome和Firexfox中使用默认的HTML MaxLength属性会导致此指令无效 - 但我需要支持未实现MaxLength的IE7。)

0 个答案:

没有答案