Show/retain 单击密码切换器时的键盘

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>

当切换器获得焦点时，软件键盘缩回。然后用户必须重新点击输入以再次显示键盘。

当切换器获得焦点时，如何以编程方式 show/retain 键盘？我已经尝试编写一个指令来强制将焦点重新放在输入上，但这感觉很笨重，而且存在两个输入的问题。

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

Answer 2

cordova 键盘插件可以关闭原生键盘但不能打开（它可以在 android 但不能 ios 上打开）。这是一个有趣的问题，有时有多个输入（主要是在 ios 上）我会关闭键盘然后重新打开。如果您只需要 android，则可以使用此插件在使用 on-tap="foo()" 录制切换时打开键盘，但据我所知，现在还有其他交互方式使用本机键盘或键盘事件。除非在切换点击强制焦点回到密码输入，但就像你说的那样并不理想：试试这个插件，也许你可以让它在两个平台上工作。键盘插件：https://github.com/driftyco/ionic-plugin-keyboard

Show/retain 单击密码切换器时的键盘

Show/retain keyboard when password toggler is clicked

javascript

input

soft-keyboard

angularjs

ionic-framework