AngularJS:转换模型时光标移动到最后一个位置

Question

>我正在使用邮政编码指令，该指令接受9位美国邮政编码并对其进行格式化。

app.directive('formatZipCode', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/g, '');
if (transformedInput.length > 9) {
transformedInput = transformedInput.slice(0, 9);
}
if (transformedInput.length > 5) {
transformedInput = transformedInput.slice(0, 5) + "-" + transformedInput.slice(5);
}
if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
return undefined;
}

ngModelCtrl.$parsers.push(fromUser);
}
};
});

当我从邮政编码中删除任何数字时，光标位置会移回最后一个位置。 当我删除第三个数字时，光标移动到最后一个数字

如何保留光标位置？

Answer 1

最好的选择是使用ng-model-options来更改输入何时更新(从而运行格式化程序(。

在这种情况下，您将牺牲实时重新格式化以支持表单可用性。

要么使用

<input type="text" ng-model="zipcode" ng-model-options="{ updateOn: 'blur' }" format-zip-code /> 

在用户离开字段时进行更新，或

<input type="text" ng-model="zipcode" ng-model-options="{ debounce: 1000 }" format-zip-code />

在1s. 此选项仍将显示光标在更新后移动到输入的末尾，但不会立即显示。

Answer 2

我已经通过使用插入符号位置解决了这个问题。记住插入符号位置，并在格式化输入后再次分配插入符号位置。

app.directive('formatZipCode', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/g, '');
if (transformedInput.length > 9) {
transformedInput = transformedInput.slice(0, 9);
}
var caretPosition = element[0].selectionStart || undefined;
if (transformedInput.length > 5) {                     
var realposition = caretPosition == 6 ? caretPosition + 1 : caretPosition;
transformedInput = transformedInput.slice(0, 5) + "-" + transformedInput.slice(5);
}
if (transformedInput !== text) {                      
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
if (typeof caretPosition === 'number') {
element[0].selectionStart = element[0].selectionEnd = realposition || caretPosition;
}
else {
element[0].selectionStart = element[0].selectionEnd = 0;
}
}
return transformedInput;
}
return undefined;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});