当Ionic和Angular js中软键盘打开时,输入字段丢失或移除焦点

时间:2014-12-24 10:08:18

标签: angularjs ionic-framework

这是我的代码:

<ion-view>
    <ion-content class="login_bg">
        <div class="login_logo"><img src="img/login_logo.png" alt=""></div>
            <div class="register_page">
                <input type="email" name="name" placeholder="Email" ng-model="login_info.forgetmail" ng-enter="forgetPassword()" />
             <div class="clearfix">
                 <a class="signup" ng-click="forgetPassword()">Submit</a>
             </div>
        </div>
    </ion-content>
</ion-view>

问题:当我在输入字段中输入时,软键盘会打开并从输入字段中删除焦点。我必须在输入字段上重新输入。请帮我解决这个问题。我试过但是找不到确切的答案..

1 个答案:

答案 0 :(得分:0)

我知道我有点迟了,但我现在发现这只是为了解决我自己的问题。

我正在解决此问题(您需要将input添加到var email = document.getElementById("email"); angular.element(window).on('resize', function(event){ var touched = angular.element(email).hasClass('ng-touched'); if (!touched) { event.preventDefault(); } }); 标记中):

input

当您点击resize时,会触发软关键字,触发resize事件,此input事件是谁“偷”了window的焦点(事实上​​,它窃取了整个resize对象的焦点。)

防止window input事件被触发时的默认行为会阻止它窃取焦点。我还考虑了ng-touched是否有类preventDefault(),因为这样可以避免每次软键盘打开和关闭时都执行preventDefault()。 实际上,在这种情况下,似乎input仅在软键盘第一次启动时触发。但这似乎已经足够了:当出现软键盘时,{ "a": 1, "b": 5, "c": 2 } 不会再次失去焦点。

我在Firefox for Android,Android stock,Lightning和Chrome中试过这个。

希望如果您仍然遇到此问题,这将有助于您或@parvindra。

有趣的是,上面提到的 Lightning 是Android的轻量级浏览器,不会受到这种烦人行为的影响。它开箱即用。