javascript – 谷歌浏览器问题：输入类型“密码”的模型未更新,但“文本”在浏览器自动填充保存的值时执行

2019年7月22日 188次阅读

我有一个使用Angular验证验证的登录表单,如下所示：

输入字段的HTML：

                                <input id="loginName" name="loginName" type="text" class="form-control" placeholder="Username" data-ng-model="loginName" data-ng-maxlength="246" required>

                                <input id="password" name="password" type="password" class="form-control" placeholder="Password" data-ng-model="password" data-ng-maxlength="246" required>

使用角度验证对登录名和密码字段验证“登录”按钮.

在Google Chrome中(其他浏览器按预期行为)保存这些字段时(如果您要保存用户名和密码功能)在刷新页面时,输入类型“text”的模型 – >另一方面,$scope.loginName使用保存的值更新输入类型’password’的模型 – > $scope.password始终为空)并且根据验证逻辑表单被声明为无效且“登录”按钮保持禁用,即使两个输入字段都填充了已保存的信息(请参阅第一个附加图像).

即使按键或鼠标点击发生的那一刻(不一定在输入字段上,但在网页上的任何地方),不知何故更新密码模型并验证表格,如附加的第二张图片所示.

我尝试使用自动对焦,自定义自动对焦指令,超时但它似乎没有按预期工作.

任何建议,可能是将光标移动到文本字段的末尾,以便表单知道浏览器在密码字段中输入了文本？

遇到这个：AngularJS browser autofill workaround by using a directive

注意：他在上面的解决方案中回答的所有问题都是通过.val()或.value方法得到的输入元素值,但是在密码输入字段的情况下,棘手的部分都是未定义的.

但没有运气！

谢谢.

《javascript – 谷歌浏览器问题：输入类型“密码”的模型未更新,但“文本”在浏览器自动填充保存的值时执行》

《javascript – 谷歌浏览器问题：输入类型“密码”的模型未更新,但“文本”在浏览器自动填充保存的值时执行》

最佳答案 你可以用

$scope.$watch('modelValue',function(newVal,oldVal){
    //your code action
});

这将继续跟踪模型值.只要模型具有价值,就会触发$scope.$watch中的代码.

点赞