在 AngularJS 中达到一定长度后防止从文本框中删除字符串

Question

我想阻止用户从 AngularJS 中的文本框中删除特定长度的字符串。

我想将 "abcd" 之类的文本固定在文本框中，这样用户就无法删除它。它会像 pre-string.

为此，我已经使用 ng-init 初始化了文本框，并在 keyup 事件中检查了字符串的长度，如果它小于预定义的大小，然后我将字符串放回 ng-model。

它没有错误，但不顺利。如果从文本框中删除文本时文本达到指定长度，我想防止按下 backspace 或 delete 按钮。

我是AngularJS的新手。

HTML

<body ng-app="myApp1">
  <div ng-controller="myController">
    <div ng-app>
      <label>Key:</label>
      <input type="text" name="key" ng-model="key" ng-init="key = 'abcd'" ng-keyup="updateKey($event)">
    </div>
  </div>
</body>

AngularJS

(function(angular) {
  'use strict';
  var myApp = angular.module('myApp1', []);

  myApp.controller('myController', ['$scope', function($scope) {
    $scope.updateKey = function($event) {
      var len = $scope.key.length;
      if ($event.keyCode === 8 && len < 4) {
        $scope.key = "abcd";
      }
    };
  }]);
})(window.angular);

Answer 1

我想你可以为 $scope.key

设置一个明确的 $watcher 函数

$scope.$watch('key', function(newValue, oldValue) {
  console.log(oldValue, newValue);
  if(newValue.length < 4) {
    $scope.key = 'abcd';
  }
});

watcher 函数会在每次更改模型时调用，所以当您更改模型时 angular 将调用此函数，在函数中我们可以获取 old 值和 new 价值基于你可以做你想达到的目标。

这里是 DEMO

在 AngularJS 中达到一定长度后防止从文本框中删除字符串

Prevent deleting string from textbox after reaching certain length in AngularJS

javascript

string

dom-events

angularjs