Question

我有以下代码，这导致使用toggler覆盖可见输入呈现单个密码输入。 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而不是两个字段，它只显示一个字段。

<强>标记

<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，其值为＆amp; oldValue表示showPassword模型的先前值。在您的案例中newValue＆amp; oldValue只是多余的，他们只是不在任何地方使用，但如果你想在那里做点什么改变，那么他们可以帮助你。

Answer 2

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

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

2 个答案: