Javascript 编辑电话号码时,光标会跳到末尾

Javascript 编辑电话号码时,光标会跳到末尾,javascript,html,angularjs,Javascript,Html,Angularjs,代码: 问题:使用掩码编辑电话号码时,光标会跳到末尾。 示例:(123)456-7890。当我尝试删除数字5并将其设置为7时,光标立即移动到末尾:(123)46-7890 如果您有任何问题,请告诉我。 如果你投反对票,请说明原因,以便我更正。序言 我对AngularJS一无所知。我以前从未使用过它。这是我第一次看到它。我不知道它是干什么的。它所做的一切似乎就是添加一个庞大的抽象层来混淆代码,并证明增加it开支在“内部人员”身上是合理的,他们可以看穿这种混淆。如果没有AngularJS,您的任务会

代码:
问题:使用掩码编辑电话号码时,光标会跳到末尾。
示例:
(123)456-7890
。当我尝试删除数字5并将其设置为7时,光标立即移动到末尾:
(123)46-7890

如果您有任何问题,请告诉我。
如果你投反对票,请说明原因,以便我更正。

序言 我对AngularJS一无所知。我以前从未使用过它。这是我第一次看到它。我不知道它是干什么的。它所做的一切似乎就是添加一个庞大的抽象层来混淆代码,并证明增加it开支在“内部人员”身上是合理的,他们可以看穿这种混淆。如果没有AngularJS,您的任务会简单得多。但是,正如我所说,我不知道AngularJS是什么,也不知道它做什么,所以我可能是错的

基本解决方案 报告行为的原因是,每当用户键入任何内容时,脚本都会覆盖
值。通常的基本解决方案是在覆盖(
元素.val(…)
)之前存储插入符号位置:

…然后立即恢复:

element[0].focus(); element[0].setSelectionRange(caretPosition, caretPosition);
您的脚本确实已经包含一个插入符号处理代码的存根,但实际上它什么也不做,它只是通过有意地将插入符号移动到字符串的末尾来重复自己的意外行为。这个毫无意义的行为似乎是对任何重用代码来编写自己的插入符号处理代码的人的一个提示。用我的代码替换那个存根

实例
var-app=angular.module('plunker',[]);
app.controller('MainCtrl',function($scope){$scope.name='Phone Number';});
应用指令('abcXyz',函数($filter){
var mobileFilter,mobileReverse;
mobileFilter=$filter('mobileFilter');
mobileReverse=$filter('mobileReverse');
返回{
限制:“A”,
要求:'ngModel',
链接:函数(范围、元素、属性、模型控制){
var格式化程序、解析器;
解析器=函数(值){
var格式;
格式化=mobileReverse(值);
/*解决方案*/var caretPosition=元素[0]。selectionStart;
/*解决方案*/if(caretPosition==4)caretPosition+=3;
/*解决方案*/if(caretPosition==10)++caretPosition;
val(mobileFilter(格式化));
/*解决方案*/元素[0]。selectionStart=element[0]。selectionEnd=caretPosition;
返回格式;
};
modelCtrl.$formatters.push(格式化程序);
返回modelCtrl.$parsers.unshift(解析器);
}
};
});
app.filter('mobileFilter',function(){
返回函数(值){
var len,val;
如果(!value)返回;
val=value.toString().replace(/\D/g,“”);
len=val.length;
如果(len<4)返回val;
否则如果(36)
返回“(”+(val.substr(0,3))+”+(val.substr(3,3))+
“-”+(val.substr(6,4));
返回值;
}
});
app.filter(“mobileReverse”,()=>value=>!!value&&value.replace(/\D/g,”)
.substr(0,10))

{{name}}


避免落选的最佳方法是问一个好问题。请阅读以下内容:尝试使用jquery在onblur事件上验证和格式化数字,而不是角度验证。这将防止最后跳。@T.Shah我们有没有办法用现有的角度验证来修复它,因为我对SSN、电话、DL等有不同的指令,谢谢您的回复。
element[0].focus(); element[0].setSelectionRange(caretPosition, caretPosition);