获得输入类型密码范围尾随空白?空白、范围、密码、类型

2023-09-13 03:27:55 作者:反手一板砖

我有一个输入密码字段。我希望能够提醒他们不能在有密码的任何空白的用户。我发现麻烦的是,我不能尾随空白传递到范围,以检测它并警告他们不能做到这一点用户。

I have an input password field. I want to be able to warn the user that they cannot have any white space in there password. The trouble I'm finding is that I cant pass the trailing white space to the scope in order to detect it and warn the user that they cannot do this.

请参阅我的plunkr例如:链接

See my plunkr example: LINK

如果您在输入字段中键入范围将返回密码多少个字符是,如果你的密码的末尾添加空白的范围将不报告正确的字符串长度,因为它显然是修剪任何尾随空白这意味着我没有办法来确定用户是否进入任何空格或没有。因此,作为用户添加尾随空格输入密码字段将显示一个多余的字符已经添加时,范围只报告字符的长度没有任何尾随空格。

If you type in the input field the scope will return how many characters the password is and if you add white space at the end of the password the scope will not report the correct string length because it is obviously trimming any trailing white space which means I have no way to identify if the user is entering any spaces or not. So as the user adds trailing spaces the input password field will show that an extra character has been added when the scope is only reporting the length of characters without any trailing spaces.

推荐答案

下面是固定plunkr解决方案升级到1.1.1角度采取NG-装饰指令,它可以让你关掉微调的优势:http://plnkr.co/edit/FLCQY2zuRV1ZMy6WCbs8?p=$p$pview

Here's the fixed plunkr solution is upgrade to 1.1.1 of angular to take advantage of ng-trim directive which allows you to turn off the trimming: http://plnkr.co/edit/FLCQY2zuRV1ZMy6WCbs8?p=preview

升级到1.1.1角或更高版本(测试过,可能在某些低版本一起使用)这个指令,你有你不想修剪NG-模型添加到您的元素。

Upgrade to Angular 1.1.1 or higher (tested, might work in some lower versions) add this directive to your element where you have the ng-model you don't want trimmed.

ng-trim="false"

下面是完整的细节:

Here's the full details:

<!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>

和JS的

var app = angular.module('plunker', ['ui.event']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});