IONIC V1: Form Keydown Enter Запускается в последнем поле, но не в первом поле внутри устройства - PullRequest
Новая
       0

IONIC V1: Form Keydown Enter Запускается в последнем поле, но не в первом поле внутри устройства

0 голосов
/ 08 октября 2018

У меня есть приложение Ionic со страницей с формой с несколькими полями.За исключением последнего поля ввода KeyPress Enter только перемещает фокус на следующее поле.Я хочу, чтобы клавиша ввода запускалась, когда фокус был на каком-либо поле формы.

<ion-view view-title="Search">
  <ion-content class="has-header">
    <form focus>
      <div class="list list-inset">
        <label class="item item-input">
          <input ng-model="searchForm.name" name="fieldName" type="text" placeholder="Nome" ng-minlength="2" ng-maxlength="70">
        </label>
        <label class="item item-input">
          <input ng-model="searchForm.city" name="fieldEmail" type="email" placeholder="E-mail" ng-maxlength="50">
        </label>
      </div>
    </form>
  </ion-content>
</ion-view>

В директивах: 

.directive('focus', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs) {

            element.bind('keydown', function(e) {

              var code = e.keyCode || e.which;
              console.log(code);
              if (code === 13) {
              alert("enter pressed");
                //element.next()[0].focus();

              }
              e.preventDefault();
            });
        }
    }
})

Таким образом, в первом поле при нажатии клавиши ввода ввод с клавиатуры (код = 13) не срабатывает, а во второмили последнее поле, событие ввода с клавиатуры запускается правильно.

Как вызвать событие, когда пользователь нажимает клавишу Enter на клавиатуре устройства, когда фокус находится на любом поле формы.

1 Ответ

0 голосов
/ 08 октября 2018

Попробуйте удалить атрибут «focus» в форме и вместо этого поместить его в каждый вход.

Примерно так: 

<ion-view view-title="Search">
  <ion-content class="has-header">
      <div class="list list-inset">
        <label class="item item-input">
          <input ng-model="searchForm.name" name="fieldName" type="text" placeholder="Nome" ng-minlength="2" ng-maxlength="70" focus>
        </label>
        <label class="item item-input">
          <input ng-model="searchForm.city" name="fieldEmail" type="email" placeholder="E-mail" ng-maxlength="50" focus>
        </label>
      </div>
  </ion-content>
</ion-view>

Надеюсь, это поможет!

...