Как сохранить фокус в поле ввода - PullRequest
Новая
       9

Как сохранить фокус в поле ввода

0 голосов
/ 21 декабря 2018

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

Япытаясь сделать свое собственное поле автозаполнения.Точно так же, как ng2-контроллер или mat-autocomplete в материале, но я не могу использовать их, потому что не могу добавить библиотеки или модули на сервер.

На данный момент у меня есть рабочее поле ввода, показывающее предложениесписок под ним, когда он имеет фокус.Когда пользователь нажимает клавишу, предложения переоцениваются.Проблема в том, что когда пользователь нажимает на предложение (тег с помощью ng-onclick), поле ввода теряет фокус, поэтому предложения исчезают, и onclick никогда не срабатывает. 

<!-- filteredUsers is an array with this kind of values :
 filteredUsers = [ {"letter" : "A",
                    "names" : ["albert@mail.com", "alice@mail.com"],
                   {"letter" : "P",
                    "names" : ["philip@mail.com"]}
                 ]
-->
<div>
  <div>
    <input type="text" ng-focus="c.focus = !c.focus" ng-blur="c.focus = !c.focus" class="form-control" ng-model="c.email">
  </div>
  <div class="datalist panel-body" ng-if="c.focus && c.filteredUsers.length > 0" style="">
    <span class="select2-search" ng-repeat="obj in c.filteredUsers">
      {{obj.letter}}
        <ul>
          <p ng-repeat="email in obj.names">
            <a href ng-click="getMyCtrlScope().change(email)">{{email}}</a>
          </p>
       </ul>
    </span>
  </div>
</div>

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

1 Ответ

0 голосов
/ 21 декабря 2018

Один из подходов состоит в том, чтобы сохранить элемент, имеющий фокус: 

<input ng-model="x" save-focus="lastTarget=$target">

app.directive("saveFocus", function() {
  return { link: postLink, };
  function postLink(scope, elem, attrs) {
    elem.on("focus", function (e) {
      scope.$apply(function() {
        scope.$eval(attrs.saveFocus, {$target:e.target});
      });
    });
  }
})

Затем нажмите элемент, чтобы изменить фокус обратно: 

<button ng-click="x=+x+1" re-focus="lastTarget">

app.directive("reFocus", function() {
  return { link: postLink, };
  function postLink(scope, elem, attrs) {
    elem.on("click", function(e) {
      scope.$eval(attrs.reFocus).focus();
    })
  }
})

ДЕМО 

angular.module("app",[])
.directive("saveFocus", function() {
  return { link: postLink, };
  function postLink(scope, elem, attrs) {
    elem.on("focus", function (e) {
      scope.$apply(function() {
        scope.$eval(attrs.saveFocus, {$target:e.target});
      });
    });
  }
})
.directive("reFocus", function() {
  return { link: postLink, };
  function postLink(scope, elem, attrs) {
    elem.on("click", function(e) {
      scope.$eval(attrs.reFocus).focus();
    })
  }
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <input ng-model="x" save-focus="lastTarget=$target">
    <br>
    <button ng-click="x=+x+1" re-focus="lastTarget">
      Increment X
    </button>
</body>
...