支付密码小键盘失去焦点校验

src/main/webapp/resources/js/usercenter/controllers/forstore/account_manager_ctrl.js

@@ -522,25 +522,76 @@ define(['app/app'], function(app) {
 		$scope.showPassword = false;
 		$scope.showNewPassword = false;
 		$scope.showPassword1 = false;
-		$scope.reloadKeyboard = function (type) {
+		$scope.reloadKeyboard = function (type, $event) {
+			$event.stopPropagation();
 			if (type === 'showPassword') {
 				$scope.showPassword = !$scope.showPassword;
 				if(!$scope.showPassword){
-          $scope.checkPassword($scope.user.password);
+          			$scope.checkPassword($scope.user.password);
+				} else {
+					$scope.closeOtherKeyboard('showPassword');
 				}
 			} else if (type === 'showNewPassword') {
 				$scope.showNewPassword = !$scope.showNewPassword;
 				if (!$scope.showNewPassword) {
 					$scope.checkNewPassword($scope.user.newPassword);
+				} else {
+					$scope.closeOtherKeyboard('showNewPassword');
 				}
 			} else if (type === 'showPassword1') {
 				$scope.showPassword1 = !$scope.showPassword1;
 				if (!$scope.showNewPassword1) {
 					$scope.checkNewPassword1($scope.user.newPassword1);
+				} else {
+					$scope.closeOtherKeyboard('showPassword1');
+				}
+			}
+		}
+		function resetPassword() {
+			$scope.showPassword = false;
+			$scope.checkPassword($scope.user.password);
+		}
+		function resetNewPassword() {
+			$scope.showNewPassword = false;
+			$scope.checkNewPassword($scope.user.newPassword);
+		}
+		function resetPassword1() {
+			$scope.showPassword1 = false;
+			$scope.checkNewPassword1($scope.user.newPassword1);
+		}
+		$scope.closeOtherKeyboard = function (type) {
+			if (type == 'showPassword') {
+				if ($scope.showNewPassword) {
+					resetNewPassword();
+				} else if ($scope.showPassword1) {
+					resetPassword1();
+				}
+			} else if (type == 'showNewPassword') {
+				if ($scope.showPassword) {
+					resetPassword();
+				} else if ($scope.showPassword1) {
+					resetPassword1();
+				}
+			} else if (type == 'showPassword1') {
+				if ($scope.showPassword) {
+					resetPassword();
+				} else if ($scope.showNewPassword) {
+					resetNewPassword();
 				}
 			}
 		}
-		$scope.reloadKeyboard();
+		$scope.closeKeyboard = function () {
+			if ($scope.showPassword) {
+				$scope.showPassword = false;
+				$scope.checkPassword($scope.user.password);
+			} else if ($scope.showNewPassword) {
+				$scope.showNewPassword = false;
+				$scope.checkNewPassword($scope.user.newPassword);
+			} else if ($scope.showPassword1) {
+				$scope.showPassword1 = false;
+				$scope.checkNewPassword1($scope.user.newPassword1);
+			}
+		}
 		//输入原密码后验证原密码是否正确
 		$scope.checkPassword = function(password) {
 			$scope.checking = true;
@@ -650,6 +701,10 @@ define(['app/app'], function(app) {
 		$scope.cancel = function () {
 			$modalInstance.close();
 		};
+		$scope.hideKeyboard = function () {
+			$scope.closeKeyboard();
+			console.log(1);
+		}
 	}]);
 
 
@@ -910,24 +965,76 @@ define(['app/app'], function(app) {
 		$scope.showNewUserPay = false;
 		$scope.showUserPay = false;
 		$scope.showNewUserPay1 = false;
-		$scope.reloadKeyboard = function (type) {
+		$scope.reloadKeyboard = function (type, $event) {
+			$event.stopPropagation();
 			if (type === 'showNewUserPay') {
 				$scope.showNewUserPay = !$scope.showNewUserPay;
 				if (!$scope.showNewUserPay) {
 					$scope.checkNewUserPay($scope.user.newUserPay);
+				} else {
+					$scope.closeOtherKeyboard('showNewUserPay');
 				}
 			} else if (type === 'showUserPay') {
 				$scope.showUserPay = !$scope.showUserPay;
 				if (!$scope.showUserPay) {
 					$scope.checkUserPay($scope.user.userPay);
+				} else {
+					$scope.closeOtherKeyboard('showUserPay');
 				}
 			} else if (type === 'showNewUserPay1') {
 				$scope.showNewUserPay1 = !$scope.showNewUserPay1;
 				if (!$scope.showNewUserPay1) {
-					$scope.checkNewUserPay1($scope.user.userPay1);
+					$scope.checkNewUserPay1($scope.user.newUserPay1);
+				} else {
+					$scope.closeOtherKeyboard('showNewUserPay1');
 				}
 			}
 		}
+		function resetNewUserPay() {
+			$scope.showNewUserPay = false;
+			$scope.checkNewUserPay($scope.user.newUserPay);
+		}
+		function resetUserPay() {
+			$scope.showUserPay = false;
+			$scope.checkUserPay($scope.user.userPay);
+		}
+		function resetNewUserPay1() {
+			$scope.showNewUserPay1 = false;
+			$scope.checkNewUserPay1($scope.user.newUserPay1);
+		}
+		$scope.closeOtherKeyboard = function (type) {
+			if (type == 'showNewUserPay') {
+				if ($scope.showUserPay) {
+					resetUserPay();
+				} else if ($scope.showNewUserPay1) {
+					resetNewUserPay1();
+				}
+			} else if (type == 'showUserPay') {
+				if ($scope.showNewUserPay) {
+					resetNewUserPay();
+				} else if ($scope.showNewUserPay1) {
+					resetNewUserPay1();
+				}
+			} else if (type == 'showNewUserPay1') {
+				if ($scope.showNewUserPay) {
+					resetNewUserPay();
+				} else if ($scope.showUserPay) {
+					resetUserPay();
+				}
+			}
+		}
+		$scope.closeKeyboard = function () {
+			if ($scope.showNewUserPay) {
+				$scope.showNewUserPay = false;
+				$scope.checkNewUserPay($scope.user.newUserPay);
+			} else if ($scope.showUserPay) {
+				$scope.showUserPay = false;
+				$scope.checkUserPay($scope.user.userPay);
+			} else if ($scope.showNewUserPay1) {
+				$scope.showNewUserPay1 = false;
+				$scope.checkNewUserPay1($scope.user.newUserPay1);
+			}
+		}
     	//验证是否设置密码
 		$scope.checkHaveUserPay=function(){
             $scope.userPayHidden = false;

src/main/webapp/resources/view/vendor/modal/updatePassword.html

@@ -108,74 +108,76 @@
 		min-height: 500px;
 	}
 </style>
-<div class="modal-header">
-	<img src="static/img/user/images/update-password.png" alt="">
-	<p>修改密码</p>
-	<i class="glyphicon glyphicon-remove" ng-click="cancel()"></i>
-</div>
-<form class="password" name="sampleSendForm" ng-submit="ok()">
-	<div class="modal-body">
-		<!--
-		<div class="row">
-			<label class="col-md-3 col-sm-3 col text-right">用户：</label>
-			<div class="col-md-8 col-sm-8 col">{{::user.userTel}} - {{::user.userName}} </div>
-		</div>
-		-->
-		<div class="row line" ng-class="{'has-success': checkSuccess, 'has-error': checkFailed}">
-			<label class="col-md-3 col-sm-3 col text-right">原密码：</label>
-			<div class="col-md-8 col-sm-8 col">
-				<input ng-model="user.password" name="password" class="form-control input-sm" type="password" ng-blur="checkPassword(user.password)" required placeholder="当前密码">
-				<img src="static/img/user/images/keyboard.png" alt="" ng-click="reloadKeyboard('showPassword');">
-				<div ng-show="showPassword" class="softkeys softkeys1" data-target="input[name='password']"></div>
-			</div>
-			<div class="col">
-				<img ng-show="checkSuccess" src="static/img/user/images/input-check-yes.png" alt="">
-				<!--<i ng-show="checkSuccess" class="fa fa-check" style="color:#339933"></i>-->
-				<i ng-show="checkFailed" class="fa fa-close" style="color:#CC3333;"></i>
-			</div>
-		</div>
-		<div class="row new-password" ng-class="{'has-success': checkSuccess1, 'has-error': checkFailed1}">
-			<label class="col-md-3 col-sm-3 col text-right">新密码：</label>
-			<div class="col-md-8 col-sm-8 col">
-				<input ng-model="user.newPassword" name="newPassword" ng-blur="checkNewPassword(user.newPassword)" class="form-control input-sm" type="password" required  placeholder="8~20位字母、数字、符号">
-				<!-- <div>密码复杂度</div> -->
-				<img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewPassword');" alt="">
-				<div ng-show="showNewPassword" style="top: 40px;" class="softkeys softkeys2" data-target="input[name='newPassword']"></div>
-			</div>
-			<div class="col">
-				<img ng-show="checkSuccess1" src="static/img/user/images/input-check-yes.png" alt="">
-				<!--<i ng-show="checkSuccess1" class="fa fa-check" style="color:#339933"></i>-->
-				<!--<i ng-show="checkFailed1" class="fa fa-close" style="color:#CC3333;"></i>-->
+<div ng-click="closeKeyboard()">
+	<div class="modal-header">
+		<img src="static/img/user/images/update-password.png" alt="">
+		<p>修改密码</p>
+		<i class="glyphicon glyphicon-remove" ng-click="cancel()"></i>
+	</div>
+	<form class="password" name="sampleSendForm" ng-submit="ok()">
+		<div class="modal-body">
+			<!--
+            <div class="row">
+                <label class="col-md-3 col-sm-3 col text-right">用户：</label>
+                <div class="col-md-8 col-sm-8 col">{{::user.userTel}} - {{::user.userName}} </div>
+            </div>
+            -->
+			<div class="row line" ng-class="{'has-success': checkSuccess, 'has-error': checkFailed}">
+				<label class="col-md-3 col-sm-3 col text-right">原密码：</label>
+				<div class="col-md-8 col-sm-8 col">
+					<input ng-model="user.password" name="password" class="form-control input-sm" type="password" ng-blur="checkPassword(user.password)" required placeholder="当前密码">
+					<img src="static/img/user/images/keyboard.png" alt="" ng-click="reloadKeyboard('showPassword', $event);">
+					<div ng-show="showPassword" class="softkeys softkeys1" data-target="input[name='password']"></div>
+				</div>
+				<div class="col">
+					<img ng-show="checkSuccess" src="static/img/user/images/input-check-yes.png" alt="">
+					<!--<i ng-show="checkSuccess" class="fa fa-check" style="color:#339933"></i>-->
+					<i ng-show="checkFailed" class="fa fa-close" style="color:#CC3333;"></i>
+				</div>
 			</div>
-			<div class="safe-level" ng-hide="checkFailed1">安全等级：
-				<span>
+			<div class="row new-password" ng-class="{'has-success': checkSuccess1, 'has-error': checkFailed1}">
+				<label class="col-md-3 col-sm-3 col text-right">新密码：</label>
+				<div class="col-md-8 col-sm-8 col">
+					<input ng-model="user.newPassword" name="newPassword" ng-blur="checkNewPassword(user.newPassword)" class="form-control input-sm" type="password" required  placeholder="8~20位字母、数字、符号">
+					<!-- <div>密码复杂度</div> -->
+					<img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewPassword', $event);" alt="">
+					<div ng-show="showNewPassword" style="top: 40px;" class="softkeys softkeys2" data-target="input[name='newPassword']"></div>
+				</div>
+				<div class="col">
+					<img ng-show="checkSuccess1" src="static/img/user/images/input-check-yes.png" alt="">
+					<!--<i ng-show="checkSuccess1" class="fa fa-check" style="color:#339933"></i>-->
+					<!--<i ng-show="checkFailed1" class="fa fa-close" style="color:#CC3333;"></i>-->
+				</div>
+				<div class="safe-level" ng-hide="checkFailed1">安全等级：
+					<span>
 					<span ng-show="secLevel>=1">弱</span>
 					<span ng-show="secLevel>=2">中</span>
 					<span ng-show="secLevel>=3">强</span>
 				</span>
+				</div>
 			</div>
-		</div>
-		<div class="warn-style" ng-show="checkFailed1">密码为8-20字符的英文、数字混合密码</div>
-		<div class="row line" ng-class="{'has-success': checkSuccess2, 'has-error': checkFailed2}">
-			<label ng-model="user.newPassword1" class="col-md-3 col-sm-3 col text-right">重复新密码：</label>
-			<div class="col-md-8 col-sm-8 col">
-				<input ng-model="user.newPassword1" name="password1" ng-blur="checkNewPassword1(user.newPassword1)" class="form-control input-sm" type="password" required placeholder="重复新密码">
-				<img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showPassword1')"  alt="">
-				<div ng-show="showPassword1" class="softkeys softkeys3" data-target="input[name='password1']"></div>
-			</div>
-			<div class="col">
-				<img ng-show="checkSuccess2" src="static/img/user/images/input-check-yes.png" alt="">
-				<!--<i ng-show="checkSuccess2" class="fa fa-check" style="color:#339933"></i>-->
-				<!--<i ng-show="checkFailed2" class="fa fa-close" style="color:#CC3333;"></i>-->
+			<div class="warn-style" ng-show="checkFailed1">密码为8-20字符的英文、数字混合密码</div>
+			<div class="row line" ng-class="{'has-success': checkSuccess2, 'has-error': checkFailed2}">
+				<label ng-model="user.newPassword1" class="col-md-3 col-sm-3 col text-right">重复新密码：</label>
+				<div class="col-md-8 col-sm-8 col">
+					<input ng-model="user.newPassword1" name="password1" ng-blur="checkNewPassword1(user.newPassword1)" class="form-control input-sm" type="password" required placeholder="重复新密码">
+					<img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showPassword1', $event)"  alt="">
+					<div ng-show="showPassword1" class="softkeys softkeys3" data-target="input[name='password1']"></div>
+				</div>
+				<div class="col">
+					<img ng-show="checkSuccess2" src="static/img/user/images/input-check-yes.png" alt="">
+					<!--<i ng-show="checkSuccess2" class="fa fa-check" style="color:#339933"></i>-->
+					<!--<i ng-show="checkFailed2" class="fa fa-close" style="color:#CC3333;"></i>-->
+				</div>
 			</div>
+			<div class="warn-style" ng-show="checkFailed2">两次输入的密码不一致</div>
 		</div>
-		<div class="warn-style" ng-show="checkFailed2">两次输入的密码不一致</div>
-	</div>
-	<div class="modal-footer">
-		<button ng-click="cancel()" type="button">取消</button>
-		<button ng-disabled="!checkSuccess || !checkSuccess1 || !checkSuccess2" type="submit">确定</button>
-	</div>
-</form>
+		<div class="modal-footer">
+			<button ng-click="cancel()" type="button">取消</button>
+			<button ng-disabled="!checkSuccess || !checkSuccess1 || !checkSuccess2" type="submit">确定</button>
+		</div>
+	</form>
+</div>
 <script>
 	function resetKeyboard(str) {
 		$(str).softkeys({
@@ -223,4 +225,7 @@
 	resetKeyboard('.softkeys1');
 	resetKeyboard('.softkeys2');
 	resetKeyboard('.softkeys3');
+	$('.softkeys').on('click', function (event) {
+		event.stopPropagation();
+	})
 </script>

src/main/webapp/resources/view/vendor/modal/updateUserPay.html

@@ -81,66 +81,68 @@
         min-height: 500px;
     }
 </style>
-<div class="modal-header">
-    <img src="static/img/user/images/update-pay.png" alt="">
-    <p>支付密码</p>
-    <i class="glyphicon glyphicon-remove" ng-click="cancel()"></i>
-</div>
-<form class="userPay" name="sampleSendForm" ng-submit="ok()" ng-init="checkHaveUserPay()">
-    <div class="modal-body">
-        <div class="row line oldUserPay">
-            <label class="col-md-3 col-sm-3 col text-right">原密码：</label>
-            <div class="col-md-8 col-sm-8 col">
-                <input ng-model="user.userPay"
-                       class="form-control input-sm" type="password" name="userPay" ng-blur="checkUserPay(user.userPay)" required>
-                <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showUserPay')" alt="">
-                <div ng-show="showUserPay" class="softkeys softkeys1" data-target="input[name='userPay']"></div>
+<div ng-click="closeKeyboard()">
+    <div class="modal-header">
+        <img src="static/img/user/images/update-pay.png" alt="">
+        <p>支付密码</p>
+        <i class="glyphicon glyphicon-remove" ng-click="cancel()"></i>
+    </div>
+    <form class="userPay" name="sampleSendForm" ng-submit="ok()" ng-init="checkHaveUserPay()">
+        <div class="modal-body">
+            <div class="row line oldUserPay">
+                <label class="col-md-3 col-sm-3 col text-right">原密码：</label>
+                <div class="col-md-8 col-sm-8 col">
+                    <input ng-model="user.userPay"
+                           class="form-control input-sm" type="password" name="userPay" ng-blur="checkUserPay(user.userPay)" required>
+                    <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showUserPay', $event)" alt="">
+                    <div ng-show="showUserPay" class="softkeys softkeys1" data-target="input[name='userPay']"></div>
+                </div>
+                <div class="col">
+                    <img ng-show="checkSuccess" src="static/img/user/images/input-check-yes.png" alt="">
+                    <!--<i ng-show="checkSuccess" class="fa fa-check" style="color:#339933"></i>-->
+                    <!--<i ng-show="checkFailed" class="fa fa-close" style="color:#CC3333;"></i>-->
+                </div>
             </div>
-            <div class="col">
-                <img ng-show="checkSuccess" src="static/img/user/images/input-check-yes.png" alt="">
-                <!--<i ng-show="checkSuccess" class="fa fa-check" style="color:#339933"></i>-->
-                <!--<i ng-show="checkFailed" class="fa fa-close" style="color:#CC3333;"></i>-->
+            <div class="warn-style oldUserPay" ng-show="checkFailed">密码为6位数字</div>
+            <div class="row">
+                <label class="col-md-3 col-sm-3 col text-right" ng-hide="!isNewFailed">新密码：</label>
+                <label class="col-md-3 col-sm-3 col text-right" ng-hide="!isNewSuccess">密码：</label>
+                <div class="col-md-8 col-sm-8 col">
+                    <input ng-model="user.newUserPay"
+                           class="form-control input-sm" type="password" name="newUserPay" ng-blur="checkNewUserPay(user.newUserPay)" required>
+                    <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewUserPay', $event)" alt="">
+                    <div ng-show="showNewUserPay" class="softkeys softkeys2" data-target="input[name='newUserPay']"></div>
+                    <!-- <div>密码复杂度</div> -->
+                </div>
+                <div class="col">
+                    <img ng-show="checkSuccess1" src="static/img/user/images/input-check-yes.png" alt="">
+                    <!--<i ng-show="checkSuccess1" class="fa fa-check" style="color:#339933"></i>-->
+                    <!--<i ng-show="checkFailed1" class="fa fa-close" style="color:#CC3333;"></i>-->
+                </div>
             </div>
-        </div>
-        <div class="warn-style oldUserPay" ng-show="checkFailed">密码为6位数字</div>
-        <div class="row">
-            <label class="col-md-3 col-sm-3 col text-right" ng-hide="!isNewFailed">新密码：</label>
-            <label class="col-md-3 col-sm-3 col text-right" ng-hide="!isNewSuccess">密码：</label>
-            <div class="col-md-8 col-sm-8 col">
-                <input ng-model="user.newUserPay"
-                       class="form-control input-sm" type="password" name="newUserPay" ng-blur="checkNewUserPay(user.newUserPay)" required>
-                <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewUserPay')" alt="">
-                <div ng-show="showNewUserPay" class="softkeys softkeys2" data-target="input[name='newUserPay']"></div>
-                <!-- <div>密码复杂度</div> -->
-            </div>
-            <div class="col">
-                <img ng-show="checkSuccess1" src="static/img/user/images/input-check-yes.png" alt="">
-                <!--<i ng-show="checkSuccess1" class="fa fa-check" style="color:#339933"></i>-->
-                <!--<i ng-show="checkFailed1" class="fa fa-close" style="color:#CC3333;"></i>-->
+            <div class="warn-style" ng-show="checkFailed1">密码为6位数字</div>
+            <div class="row">
+                <label class="col-md-3 col-sm-3 col text-right">确认密码：</label>
+                <div class="col-md-8 col-sm-8 col">
+                    <input ng-model="user.newUserPay1"
+                           class="form-control input-sm" name="newUserPay1"  type="password" ng-blur="checkNewUserPay1()" required>
+                    <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewUserPay1', $event)" alt="">
+                    <div ng-show="showNewUserPay1" class="softkeys softkeys3" data-target="input[name='newUserPay1']"></div>
+                </div>
+                <div class="col">
+                    <img ng-show="checkSuccess2" src="static/img/user/images/input-check-yes.png" alt="">
+                    <!--<i ng-show="checkSuccess2" class="fa fa-check" style="color:#339933"></i>-->
+                    <!--<i ng-show="checkFailed2" class="fa fa-close" style="color:#CC3333;"></i>-->
+                </div>
             </div>
+            <div class="warn-style" ng-show="checkFailed2">两次输入的密码不一致</div>
         </div>
-        <div class="warn-style" ng-show="checkFailed1">密码为6位数字</div>
-        <div class="row">
-            <label class="col-md-3 col-sm-3 col text-right">确认密码：</label>
-            <div class="col-md-8 col-sm-8 col">
-                <input ng-model="user.newUserPay1"
-                       class="form-control input-sm" name="newUserPay1"  type="password" ng-blur="checkNewUserPay1()" required>
-                <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewUserPay1')" alt="">
-                <div ng-show="showNewUserPay1" class="softkeys softkeys3" data-target="input[name='newUserPay1']"></div>
-            </div>
-            <div class="col">
-                <img ng-show="checkSuccess2" src="static/img/user/images/input-check-yes.png" alt="">
-                <!--<i ng-show="checkSuccess2" class="fa fa-check" style="color:#339933"></i>-->
-                <!--<i ng-show="checkFailed2" class="fa fa-close" style="color:#CC3333;"></i>-->
-            </div>
+        <div class="modal-footer">
+            <button ng-click="cancel()" type="button">取消</button>
+            <button ng-disabled="(!checkSuccess && !checkSuccess1 && !checkSuccess2)" type="submit">确定</button>
         </div>
-        <div class="warn-style" ng-show="checkFailed2">两次输入的密码不一致</div>
-    </div>
-    <div class="modal-footer">
-        <button ng-click="cancel()" type="button">取消</button>
-        <button ng-disabled="(!checkSuccess && !checkSuccess1 && !checkSuccess2)" type="submit">确定</button>
-    </div>
-</form>
+    </form>
+</div>
 <script>
     function resetKeyboard(str) {
         $(str).softkeys({
@@ -188,4 +190,7 @@
     resetKeyboard('.softkeys1');
     resetKeyboard('.softkeys2');
     resetKeyboard('.softkeys3');
+    $('.softkeys').on('click', function (event) {
+        event.stopPropagation();
+    })
 </script>