使用angularjs保留光标位置 [英] Preserving cursor position with angularjs
问题描述
以下代码段对 input
执行我想要的操作,即删除所有非字母数字字符,转换为大写,并保留光标位置.
The following snippet does what I want to an input
, i.e., it removes all non-alphanumerical characters, converts to uppercase, and preserves the cursor position.
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
中,它可以工作......主要是.
I placed this snippet in the link
of a directive and it works.... mostly.
问题在于angular
模型在应用更改之前 看到了值.我尝试谷歌搜索如何使用 $apply
或 $digest
或其他任何东西,但没有任何效果.
The problem is that the angular
model sees the value before the change gets applied. I tried to Google for how to use $apply
or $digest
or whatever here, but nothing worked.
(实际上,我以某种方式管理了它,但后来内容被重新渲染,我失去了位置.我无法复制它,但无论如何它还是不够好.)
(Actually, I somehow managed it, but then the content was re-rendered and I lost the position. I can't reproduce it, but it wasn't good enough, anyway.)
推荐答案
一种方法
- 输入只清理一次
ngChange
然后只触发一次输入
- The input is only cleaned once
ngChange
on the input is then only fired once
是使用 ngModelController 的 $parsers
数组提供.它被设计为影响模型值的地方(通过其返回值),但它也可以用作输入事件的侦听器.
is to use the $parsers
array that the ngModelController provides. It's designed as a place to affect the model value (via its return value), but it also can be used as a listener to input events.
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
的这种用法是否有点黑客.该指令可以用作:
However, I'm not sure if this usage of $parsers
is a bit of a hack. The directive can be used as:
<input type="text" clean-input ng-model="name">
或者如果你想要一个 ngChange
函数:
or if you would like an ngChange
function:
<input type="text" clean-input ng-model="name" ng-change="onChange()">
在 http://plnkr.co/edit/dAJ46XmmC49wqTgdp2qz?p=preview
This can be seen in-action at http://plnkr.co/edit/dAJ46XmmC49wqTgdp2qz?p=preview
这篇关于使用angularjs保留光标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!