Disabling ios keyboard when init keyboard on dynamically added input

[kerv]

When initializing the keyboard with an input that is dynamically added to the page, the iOS keyboard appears for a brief second and then disappears. It is as if the code focuses the input while the keyboard is initializing. This occurs even if the input is added as readonly or disabled.

I'm building a page that adds several inputs and initializes the keyboard on all of them. For each one, the ios keyboard appears briefly and then shows the mottie keyboard. It's visually rather annoying :).

Any ideas? http://jsfiddle.net/kerv/hyc1x50b/3/

HTML

<div id="testDiv">   
</div>
<input type="button" id="addButton" />

JS

        $(document).on('click', '#addButton', function () {
            var appendString = '<input type="text" name="newField" >';

            $(appendString).appendTo('#testDiv').keyboard();


        });

        $(document).ready(function () {
            $('#test').keyboard();
            //
        });

[Mottie]

Hi @kerv!

Honestly, I'm not sure what to tell you... I'll had to snag my old iPad to test that demo (v5.1 Safari).

The initial demo you sent appears to open the iOS keyboard on both the in-place input and dynamically added inputs. Though, when I set the lockInput option to true, it was working as expected, e.g. no iOS keyboard popped up at all (demo).

Maybe stuff has changed in newer versions/devices? I don't own any other iOS devices to be able to test this.

[kerv]

Hi Rob,

Thanks for looking into this.
I tried your demo on my iPad and it still happens on latest Safari. Right as soon as you click the Add button, if you look closely at the bottom of the screen the iOS keyboard appears for about 0.2 seconds. It's really quick. Sometimes it actually is barely noticeable, but if you change the code to append and keyboardtize 5 or 6 inputs you notice it a bit more.

I spent a few hours looking through your init code but no luck yet. It's something that iOS must do when attaching an input to the page. The only thing I thought I could do was possibly write a "reset" bindings command, whereby I could add my own classes/popup attributes to an input manually and then call this "reset" bindings (by passing in the jquery selector of the input) and perhaps at this point, it would work as intended. I'm not 100% sure though.

I'll keep digging and let you know if I find anything. Other than that, your keyboard works great on the iPad as long as you initialize things right on page load the very first time.

Regards,
Kev

[Mottie]

Oh I think I finally found a solution (source)! (demo)

If you set both the lockInput option to true and the input's enabled property to false, the iOS keyboard doesn't open... as least not on my old iPad.

$(function () {
    $('#test')
        .prop('enabled', false)
        .keyboard({ lockInput: true });
});

You have to set both; but I think the lockInput isn't setting the readonly attribute properly since I don't see that property set.

[kerv]

HI Rob,

Yep - still doesn't work on the latest iPad. It is so subtle for when the iOS keyboard, it literally flickers about 10px at the bottom of the iPad screen and then disappears. Sometimes it is so fast you don't even notice and other times it is slower.

It's more apparent when you add multiple inputs at once in the add button, even with the prop('enabled', false) in there.
http://jsfiddle.net/kerv/hyc1x50b/11/

I'm still investigating here.

[mattriverm]

I have a custom layout which uses preview and lockInput: true. In jquery.keyboard.js, after line 336 I added

.attr('readonly', 'readonly')

which solved this issue for me

[Mottie]

Hi @mattriverm!

That bit of code already exists within the plugin - line 362

@buildAll I have no idea why you posted your online editor/JSON question here. Have you tried Stack Overflow?

[kerv]

An update.
Latest iOS version (that was release Sept 19 2014) seems to fix the issue for us!