Показывать/удерживать клавиатуру при нажатии на кнопку переключения пароля.

Question

У меня есть следующий код, который приводит к тому, что один ввод пароля отображается с помощью переключателя, накладывающего видимый ввод. Директива ion-toggle переключает видимость двух входов.

<label class="item item-input"> 
    <input placeholder="Password" ng-hide="showPassword" type="password"> 
    <input placeholder="Password" ng-if="showPassword" type="text"> 

    <ion-toggle ng-model="showPassword" toggle-class="toggle-energized">&nbsp;</ion-toggle> 
</label> 

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

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

Here's a basic demo. Конечно, вы не получите клавиатуру в обозревателе рабочего стола.

спасибо.

Answer 1

Я создал директиву, которая даст фокус на поле password, когда нажата кнопка toogle. Также рефакторинг html поля пароля вместо двух полей отображает только одно поле.

Markup

<ion-content> 
    <label class="item item-input" ng-init="pwd"> 
    <input placeholder="Password" ng-attr-type="{{showPassword? 'text': 'password'}}" 
     ng-model="pwd" do-focus="showPassword"/> 

    <ion-toggle ng-model="showPassword" toggle-class="toggle-energized">&nbsp;</ion-toggle> 
    </label> 
</ion-content> 

Директива

.directive('doFocus', function(){ 
    return{ 
    link: function(scope, element, attrs){ 
     scope.$watch(attrs.doFocus,function(newValue, oldValue){ 
      element.focus(); 
     }); 
    } 
    } 
}); 

Forked Codepen

Редактировать

Директива была реализована таким образом, что мы переходим к переходу имени флага в атрибут showPassword внутри директивы, такой как do-focus="showPassword", так что директива поместит $watch в переменную области видимости с помощью attrs.doFocus, функция наблюдателя будет запущена, а при переключении кнопки showPassword , В основном это внутренний наблюдатель scope.$watch('showPassword'. Тогда первым параметром функции будет newValue, который изменяется значение & oldValue означает предыдущее значение модели showPassword. Здесь в вашем случае newValue & oldValue просто избыточны, они просто не используются нигде, но если вы хотите что-то сделать, то они могут вам помочь.

Answer 2

Плагин для клавиатуры Cordova может закрыть встроенную клавиатуру, но не открыть ее (он может открыть ее на Android, но не ios). Это интересная проблема, иногда с несколькими входами (в основном на ios). Я буду закрывать клавиатуру, а затем снова открывать. Если вам нужен только андроид, вы можете использовать этот плагин, чтобы открыть клавиатуру, когда переключатель включен, используя on-tap = «foo()», однако, насколько я знаю, теперь есть другой способ взаимодействия с родной клавиатурой или события клавиатуры. Если не переключиться на нажатие клавиши, вернитесь к вводу пароля, но, как вы сказали, это не идеально: попробуйте плагин, возможно, вы можете заставить его работать на обеих платформах. Keyboard Plug-in: https://github.com/driftyco/ionic-plugin-keyboard