角度限制输入[数字] 长度答案

【问题标题】：Angular limit input[number] length角度限制输入[数字] 长度
【发布时间】：2017-09-14 10:15:00
【问题描述】：

当输入达到最大值时，我想标记输入（双击输入）然后按一个数字使其更改整个输入不要更改它，因为指令e.preventDefault(); 选择事件可以在以下位置查看：

angular.element(elem).on("select", function(e) {
                console.log(e);

            });

修复它的最佳方法是什么？指令：

angular.module('myApp')
  .directive('limitTo', limitTo);

function limitTo() {    
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit){
                    e.preventDefault();
                } 
            });
        }
    }
};

并使用：

    <input type="number" class="form-control form-control-lg"  limit-to="6" 
    ng-model="vm.details.m_inputSMS" placeholder = {{vm.configProprs.kodPlaceHolder}} name ="m_inputSMS" id="m_inputSMS"
    ng-model-options="{ updateOn: 'blur' }"required/>

【问题讨论】：

请添加一些代码。到目前为止，您尝试过什么？
补充了，和原来的问题一样。
尝试用新的值替换该值，不确定这是不是最好的方法。
谢谢，但这段代码中的double right click 逻辑在哪里？
没有，我不知道如何处理选择（双击右键）并在达到限制时插入新值。

标签： javascript angularjs

【解决方案1】：

所以为了解决这个问题，我使用了window.getSelection().toString() 并确保选择与输入匹配：

if(this.value.length == limit && window.getSelection().toString() == this.value){
     //logic goes in here...
}

【讨论】：

这个解决方案中的双击右键行为在哪里？
双击插入值到选择字符串中。

【解决方案2】：

如果你想限制输入字段然后使用 ng-minlength="6" ng-maxlength="6" 这个你可以在 angularjs 中分配限制。

<input type="number" class="form-control form-control-lg"  ng-minlength="6" ng-maxlength="6"
    ng-model="vm.details.m_inputSMS" placeholder = {{vm.configProprs.kodPlaceHolder}} 
    name ="m_inputSMS" id="m_inputSMS" ng-model-options="{ updateOn: 'blur' }"required/>

【讨论】：

通过使用 ng-minlength 和 ng-maxlength，您只能在输入字段中输入 6 位数的值。
为它贴一个小提琴。