CODEWITHSUNDEEP
javascriptjqueryioshtmljquery-mobile
sbaltes
sbaltes

Reputation: 479

jQuery mobile: Hide virtual keyboard after closing popup

I'm using jQuery mobile in a project and need a popup with a textarea on it:

<div data-role="popup" id="popupDialog" data-overlay-theme="none" data-theme="a" style="width: 350px; max-width:350px;" class="ui-corner-all" data-dismissible="false">
    <button id="dialogCloseButton" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</button>
    <div data-role="content" class="ui-corner-bottom ui-content" style="text-align: center; margin: auto;">
        <textarea id="textArea" data-theme="b" style="resize: none; max-width: 100%; max-height: 150px; width: 100%; height: 150px; padding-bottom: 5px;"></textarea>
        <button data-theme="a">Ok</button>
    </div>
</div>

I'm opening the popup like this:

$('#popupDialog').popup('open');

When I now enter text in the textarea and close the popup using the button, the virtual keyboard won't hide on my iPad running iOS 6.1.

I tried this hack, which didn't work for me.

When I blur the textarea before closing the popup, the textarea will automatically get the focus again (you can test this on my example site using the "Blur"-button).

Edit: removed link to example.

Upvotes: 0

Views: 5267

Answers (2)

Nisanth Sojan
Nisanth Sojan

Reputation: 1099

It's pretty self-explanatory. The 2nd line will de-focus all input fields, and it relies on jQuery. I found that calling blur() on the single focused textfield didn't always work. Either one of these lines should work independently, but both of them together cannot be stopped!

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};

Upvotes: 0

sbaltes
sbaltes

Reputation: 479

This works for me:

$('#textArea').blur();
$('#popupDialog').attr("tabindex",-1).focus();

Upvotes: 1

Related Questions