Как ограничить ввод специальных символов в столбец ввода сетки Kendo - PullRequest
Новая
       6

Как ограничить ввод специальных символов в столбец ввода сетки Kendo

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

У меня есть сетка кендо со столбцом описания.Как я могу запретить пользователю вводить в него специальные символы?У меня есть поле столбца сетки Кендо, как показано ниже. 

{ field : "myDesc", width : 200, title : "My Description"}

Пока что я сделал, как показано ниже ... но не повезло. 

{ 
  field : "myDesc",
  width : 200,
  title : "My Description",
  editor: function(container, options) { 
              $('<input type="text" pattern="[A-Za-z0-9]" class="k-input k-textbox">')
                  .appendTo(container); 
          },
  attributes : {
                "class":"table-cell",
                style:"text-align: left;
                       white-space:nowrap;
                       overflow:hidden;
                       text-overflow:ellipsis;"
               }
}

Я хочу ограничить ввод специальных символов, таких как ~_!@#$%^&*()+=-[]\\\';,./{}|\":<>?

Обновление

Ну, я пропустил, чтобы вы, ребята, знали, что я использую сетку пользовательского интерфейса кендо с AngularJS.Я попробовал Марко предложить решение, изменив мой код Angular способом.Все еще не повезло. 

{ field : "myDesc", width : 200, title : "My Description", 
                                    editor: function(container, options) { 
                                          $('<input type="text" class="k-input k-textbox" ng-keypress="isValidChar($event)">').appendTo(container); 
                                    },
                                    attributes : {"class":"table-cell",style:"text-align: left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"}},

И моя функция, как показано ниже. 

$scope.isValidChar = function(e) {
                var match = e.key.match(/[a-zA-Z0-9]/);
                return  match ? true : false; 
            };

И еще я вижу здесь еще одну проблему, когда я фокусируюсь на том, что я ввел, не обновляется, и этопоказывает предыдущее значение.

Прикрепление снимка экрана здесь.Извините, я должен замаскировать несколько вещей на скриншоте в целях конфиденциальности.

снимок экрана

1 Ответ

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

Вы можете сделать это, используя событие onkeypress: 

{ 
  field : "myDesc",
  width : 200,
  title : "My Description",
  editor: function(container, options) { 
              $('<input type="text" class="k-input k-textbox" onkeypress="return isValidChar(event)">')
                  .appendTo(container); 
          },
   /*...*/
}

function isValidChar(e) {
    var match = e.key.match(/[a-zA-Z0-9]/);
    return  match ? true : false; 
}

Демо: https://dojo.telerik.com/erIRUSiR/2

...