Проблема с пробелами в поле ввода в Angular / Regex? Мне нужно ограничить первый пробел, а затем разрешить пользователю вводить пробел после первого символа - PullRequest
Новая
       1

Проблема с пробелами в поле ввода в Angular / Regex? Мне нужно ограничить первый пробел, а затем разрешить пользователю вводить пробел после первого символа

0 голосов
/ 16 мая 2018

Я не хочу, чтобы пользователь вводил пробел в первом символе, а также ограничивал пользователя 3 специальными символами.

Он должен быть в состоянии нажать пробел после первого слова. Я использовал REGEX с директивой, и я могу достичь большей ее части. Проблема в том, что пользователь не может ввести пробел в любом месте поля ввода.

помощь с регулярным выражением будет оценена. Я тоже прикрепил плункерную ссылку. https://plnkr.co/edit/05fqqyAn7LRr9vOtri4b?p=preview

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

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

app.directive("regExInput", function(){
    "use strict";
    return {
        restrict: "A",
        require: "?regEx",
        scope: {},
        replace: false,
        link: function(scope, element, attrs, ctrl){
          element.bind('keypress', function (event) {
            var regex = new RegExp(attrs.regEx);
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
            if (!regex.test(key)) {
               event.preventDefault();
               return false;
            }
          });
        }
    };
});
<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.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>INSane {{name}}!</p>
    
    <div>
      <input type="text" reg-ex-input reg-ex="^[^-\s&</][ws-]*$" />
    </div>
  </body>

</html>

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Второй вопрос касается самой директивы.Директива сравнивает односимвольный ввод с регулярным выражением, предназначенным для всей строки : 

if (!regex.test(key)) {
  event.preventDefault();
  return false;
}

Если вы хотите проверить правильность всей строкив случае события keypress это не сработает.Событие нажатия клавиши сообщает вам, какая клавиша была нажата, а не какая строка будет , если клавиша будет принята.Как правило, вы хотите проверить всю строку по регулярному выражению после того, как значение изменилось, как в случае input.Это означает, что вы не сможете отменить нажатия клавиш, но это все равно будет необычный UX.Например, клавиши backspace и arrow являются нажатиями клавиш, и их оценка в контексте регулярного выражения не имеет большого смысла.Возможно, вы захотите рассмотреть UX UX, а не предотвращение нажатия клавиш.

0 голосов
/ 16 мая 2018

Вот что означает ваше регулярное выражение, по частям 

^         Beginning of string
[^        Any character that's not one of the following:
  -         Literal '-' character
  \s        Whitespace
  &         Literal '&' character
  <         Literal '<' character
  /         Literal '/' character
]
[         One of the following characters:
  w         Literal 'w'
  s         Literal 's'
  -         Literal '-'
]
*         ...repeated 0 or more times
$         End of string

Если ваше намерение было, чтобы символы после первого были либо символами слова, либо пробелами, либо символ "-" , [ws-] следует заменить на [\w\s-], поскольку \w означает "слово" символ "и \s означает пробел, а не w и s, которые являются буквальными символами.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...