以下代码片段执行我想要的输入
,即删除所有非字母数字字符,转换为大写,并保留光标位置。
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 上看到。
关于jquery - 使用 angularjs 保留光标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22940346/