Onsen,AngularJS和上一个下一个按钮iOS

时间:2022-08-24 13:16:57

I use Onsen and Anguarlarjs to make my mobile app.

我使用Onsen和Anguarlarjs来制作我的移动应用程序。

The app having four tabs, tab two contains a form and tab four contain another form. When my app run in iOS platform, I fill two tab form and Apple keyboard show next-previous buttons.

该应用程序有四个选项卡,选项卡二包含一个表单,选项卡四包含另一个表单。当我的应用程序在iOS平台上运行时,我填写两个选项卡表单,Apple键盘显示下一个上一个按钮。

When the focus is on the last input, next button is enabled. If I click in next button, first input of the four page is focus and the tabs go out of control. I try use <input tabindex=""> to fix this issue but not work correctly.

当焦点位于最后一个输入时,启用下一个按钮。如果我单击下一个按钮,则四页的第一个输入是焦点,并且标签失控。我尝试使用来解决此问题,但无法正常工作。

How to fix forms for what not jump page two to page four when click in next button?

当点击下一个按钮时,如何修复不跳第二页到第四页的表格?

Thanks a lot!

非常感谢!

1 个解决方案

#1


0  

I have been able to fix the problem. I disabled inputs in form2 and enabled inputs in form1 when tab1 is visible. If tab2 is visible form1 inputs are disabled and form1 inputs are enabled. This way the buttons next-previous in ios work in the correct order and do not jump from one form to another. This is the code:

我已经能够解决这个问题。我禁用了form2中的输入,并在tab1可见时启用了form1中的输入。如果tab2可见,则表示1输入被禁用,并且启用了form1输入。这样,ios中的next-previous按钮按正确顺序工作,不会从一种形式跳转到另一种形式。这是代码:

-Controller

-Controller

$scope.checkTab = function (tab) {
    if (tab == 1 || tab==4) {
        var form1 = document.getElementById("form1");
        var form2 = document.getElementById("form2");

        switch (tab) {
            case 1:
                disableForm(form1,false);
                disableForm(form2,true);
                break;

            case 4:
                disableForm(form1,true);
                disableForm(form2,false);
                break;

        }
    }
}
function disableForm(form,disabled){
    var elements = form.elements;
    for (var i = 0, len = elements.length; i < len; ++i) {
        elements[i].disabled = disabled;
    }
}

-HTML

-HTML

 <ons-tab ng-click="checkTab(0)" page="html/page.html" active> //number is tab position 

Regards

问候

#1


0  

I have been able to fix the problem. I disabled inputs in form2 and enabled inputs in form1 when tab1 is visible. If tab2 is visible form1 inputs are disabled and form1 inputs are enabled. This way the buttons next-previous in ios work in the correct order and do not jump from one form to another. This is the code:

我已经能够解决这个问题。我禁用了form2中的输入,并在tab1可见时启用了form1中的输入。如果tab2可见,则表示1输入被禁用,并且启用了form1输入。这样,ios中的next-previous按钮按正确顺序工作,不会从一种形式跳转到另一种形式。这是代码:

-Controller

-Controller

$scope.checkTab = function (tab) {
    if (tab == 1 || tab==4) {
        var form1 = document.getElementById("form1");
        var form2 = document.getElementById("form2");

        switch (tab) {
            case 1:
                disableForm(form1,false);
                disableForm(form2,true);
                break;

            case 4:
                disableForm(form1,true);
                disableForm(form2,false);
                break;

        }
    }
}
function disableForm(form,disabled){
    var elements = form.elements;
    for (var i = 0, len = elements.length; i < len; ++i) {
        elements[i].disabled = disabled;
    }
}

-HTML

-HTML

 <ons-tab ng-click="checkTab(0)" page="html/page.html" active> //number is tab position 

Regards

问候