Ionic Slide Box / Slides with inputs

ionic-v1
1

I have a slide box with multiple slides, each slide has 3 inputs and a submit & cancel button. In android 4.2.2 device the prev/next buttons from the keyboard tries to go from the 3rd input of slide 1 to the 1st input of the next slide, but what actually happens is the two slides clash and merge, on lollipop the user is on 3rd input then presses next then the keyboard drops so it knows its the end of the form.

I’ve also stopped user swiping to change the slide this ‘could’ be part of why the slides overlay but i want to stop the swipe change the slide - I use buttons to change the slide.

I’ve tried negative tab-indexing, haven’t yet tried giving each form on each a slide a different name to each other say

<form name="slideForm{{$index}}" form-manager novalidate >
    <input type="number" ng-model="data.param1" />
    <input type="number" ng-model="data.param2" />
    <input type="number" ng-model="data.param3" />
    <button class="button button-clear" ng-click="closeSlideBoxModal()">Cancel</button>
    <button ng-disabled="!slideForm.$valid" class="button button-balanced" ng-click="submitData((data.param1),(data.param2),(data.param3))">Submit</button>
</form>

If i could find a way to disable the next button(keyboard) when on the 3rd input that would be grand!

2

Hey @MWright24! Just wondering if you ever got a response or a solution for this - if yes, please PM me, I’m encountering the same issue, and really need a fix. Thanks!

3

Even i have the same issue. If someone have a solution for this please share it.

4

Whichever input is causing the issue give it an id of dropKeyboard for example

document.addEventListener("keydown", function (e) {
    if (e.which == 9) { 
        if (e.target.id == 'dropKeyboard') {
            e.preventDefault();
            if(window.cordova){
                cordova.plugins.Keyboard.close()
            }
        }
    } 
});

I chose to drop the keyboard after the button press.

HTH

5

I also have the same issue.document.addEventListener(“keydown”…) not worked for me.If anyone have better solution please share it…

6

try e.which == 13

document.addEventListener("keydown", function (e) {
    if (e.which == 13) { 
        if (e.target.id == 'dropKeyboard') {
            e.preventDefault();
            if(window.cordova){
                cordova.plugins.Keyboard.close()
            }
        }
    } 
})

;
:slight_smile:

7

Thank you very much for ur reply.But still no changes…

8

try debugging the e.which button code that is pressed.

You running this on PC ,Android or iOS?

Also make sure your input has the specific id in the eventlistener.

If all else fails make a codepen if at all possible.

1 Like