Get the final blank space from an input type password to an area?

I have a password input field. I want the user to be able to warn the user that they cannot have a space in the password. The problem that I find is that I cannot transfer the final white space to the scope and warn the user that they cannot do this.

See my plunkr example: LINK

If you enter an input field, the region will return the number of characters that the password will contain, and if you add a space at the end of the password, the region will not report the correct length of the string, since it obviously cuts off any finite empty space, which means I don’t have a way to determine if the user is entering any spaces or not. Since the user adds trailing spaces, the password field indicates that an extra character was added when the scope indicated only the length of the characters without any trailing spaces.

+4
source share
1 answer

Here, the plunkr fixed solution is updated to 1.1.1 from angular to use the ng-trim directive, which allows you to disable cropping: http://plnkr.co/edit/FLCQY2zuRV1ZMy6WCbs8?p=preview

Upgrading to angular 1.1.1 or higher (tested, may work in some lower versions) add this directive to your element where you have an ng-model that you do not want to crop.

ng-trim="false" 

Here is the full information:

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require=" angular.js@1.1.x " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js" data-semver="1.1.1"></script> <script src="angular_ui.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <form> Pass length is {{pass.length}}<br> <input type="password" data-ng-model="pass" data-ng-trim="false"> </form> </body> </html> 

And js

 var app = angular.module('plunker', ['ui.event']); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; }); 
+8
source

Source: https://habr.com/ru/post/1491163/


All Articles