使用angularjs保留光标位置

  • Z时代
  • 2024-01-10
  • 分类：问答

下面的代码片段实现了我想要的功能input，即，它删除了所有非字母数字字符，转换为大写字母，并保留了光标位置。

element = $(element);
element.keyup(function() {
    var x = element.val();
    var y = x && x.toUpperCase().replace(/[^A-Z\d]/g, '');
    if (x===y) return;
    var start = this.selectionStart;
    var end = this.selectionEnd + y.length - x.length;
    element.val(y);
    this.setSelectionRange(start, end);
});

我将此代码段放置在link指令的中，并且可以正常工作。

问题在于，在应用更改 之前 ，angular模型会看到该值。我尝试向Google查询如何使用或此处的任何内容，但没有任何效果。

__$apply``$digest

（实际上，我以某种方式进行了管理，但是内容重新呈现后我失去了位置。我无法复制它，但是无论如何它还不够好。）

回答：

一种这样做的方式

  • 输入仅清洗一次

  • ngChange 然后只触发一次

是使用ngModelController提供的$parsers数组。它被设计为影响模型值（通过其返回值）的地方，但是它也可以用作输入事件的侦听器。

app.directive('cleanInput', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      var el = element[0];
      function clean(x) {
        return x && x.toUpperCase().replace(/[^A-Z\d]/g, '');
      }
      ngModelController.$parsers.push(function(val) {
        var cleaned = clean(val);
        // Avoid infinite loop of $setViewValue <-> $parsers
        if (cleaned === val) return val;
        var start = el.selectionStart;
        var end = el.selectionEnd + cleaned.length - val.length;
        // element.val(cleaned) does not behave with
        // repeated invalid elements
        ngModelController.$setViewValue(cleaned);
        ngModelController.$render();
        el.setSelectionRange(start, end);
        return cleaned;
      });
    }
  }
});

但是，我不确定这种用法$parsers是否有点骇人听闻。该指令可以用作：

<input type="text" clean-input ng-model="name">

或者如果您想要一个ngChange功能：

<input type="text" clean-input ng-model="name" ng-change="onChange()">

可以在http://plnkr.co/edit/dAJ46XmmC49wqTgdp2qz?p=preview中查看实际使用情况

以上是 使用angularjs保留光标位置 的全部内容， 来源链接： utcz.com/qa/416023.html

回到顶部