javascript - 单击密码切换器时显示/保留键盘

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

我创建了一个指令，它会在单击 toogle 按钮时将焦点放在 password 字段上。还重构了密码字段的 html，而不是两个字段，它将只显示一个字段。

标记

<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" 以便该指令将使用 attrs.doFocus 将 $watch 放在范围变量上，当您切换 showPassword 按钮时，会触发观察器函数。基本上这个内部观察者是 scope.$watch('showPassword'。然后函数的第一个参数将是 newValue ，它是更改值 & oldValue 意味着showPassword 模型的先前值。在您的情况下，newValue 和 oldValue 只是多余的，它们不会在任何地方使用，但如果您想在那里做一些改变，然后他们可以帮助你。