Question

我在HTML文件的顶部有这个：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
    var app=    angular.module("app",[]);
    app.config(function($interpolateProvider){
        $interpolateProvider.startSymbol("[[[");
        $interpolateProvider.endSymbol("]]]");
    });

    app.controller("MainCtrl",function($scope){
        $scope.name=    "World";
    })
</script>

我有两个input元素。

<input id="id_password1" name="password1" ng-model="pw" placeholder="Password" type="password" required="">

和

<input id="id_password2" name="password2" ng-model="pw" placeholder="Confirm password" type="password" required="">

当我在第一个输入中键入我的密码时，我想用第一个输入的内容填充第二个输入。我该怎么做？

修改：这些input位于使用Django制作的form中。

在我的forms.py中，我有这个。

class RegisterForm(UserCreationForm):
    '''
    Form that makes user using just email as username
    '''
    username=   forms.EmailField(label=_("Email"), widget=forms.TextInput(attrs={"placeholder":"Email", "id":"id_register_username"}))
    password1=  forms.CharField(label=_("Password"), widget=forms.PasswordInput(attrs={"placeholder":"Password", "ng-model":"pw"}))
    password2=  forms.CharField(label=_("Password confirmation"), widget=forms.PasswordInput(attrs={"placeholder":"Confirm password", "ng-model":"pw"}))

Answer 1

你想要的是ng-model同名，但不是确认密码！

但是，我为您的问题添加了2个样本：

样本1：2相同的ng-model

var app = angular.module("app", [])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<input name="password1" ng-model="password" type="password">

<input name="password2" ng-model="password" type="password">
</div>

样本2：2个不同的ng模型

var app = angular.module("app", [])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<input name="password1" ng-model="password" type="password" ng-change="confirmPassword = password">
password is: {{password}}
<input name="password2" ng-model="confirmPassword" type="password">
confirmPassword is: {{confirmPassword}}

</div>

随意提问。

Answer 2

var mirrorInput = function() {
  var input1 = document.getElementById("id_password1");
  var input2 = document.getElementById("id_password2");
  input1.addEventListener("keyup", function() {
    input2.value = input1.value;
  })
};

window.onload = function() {
  mirrorInput();
};

<input id="id_password1" name="password1" ng-model="pw" placeholder="Password" type="password" required="">

<input id="id_password2" name="password2" ng-model="pw" placeholder="Confirm password" type="password" required="">

当我输入时，如何从一个`input`匹配另一个密码？

2 个答案: