Mottie/Keyboard — Issue #44: Virtual Keyboard doesn't appear in jQuery Mobile Dialogs
Author: irsick
Created: 2012-01-25 22:15:57+00:00
State: open

I'm trying to attach Virtual Keyboard to 'mypage' which opens as dialog using:

<a href="#mypage" data-role="button" data-rel="dialog" data-transition="none">Create a service request</a>

The JS code is:

$( '#mypage' ).live( 'pageinit',function(event){

$(function(){
console.log($('#keyboard').val());

var k = $('#keyboard'),
kbOptions = {
keyBinding : 'mousedown touchstart',
// make sure jQuery UI styles aren't applied even if the stylesheet has loaded
// the Mobile UI theme will still over-ride the jQuery UI theme
css : {
input : '',
container : '',
buttonDefault : '',
buttonHover : '',
buttonActive : '',
buttonDisabled : ''
}
};

k
.keyboard(kbOptions)
/* initial setup for mobile extension */
.addMobile({
// keyboard wrapper theme
container : { theme:'a' },
// theme added to all regular buttons
buttonMarkup : { theme:'a', shadow:'true', inline:'true', corners:'false' },
// theme added to action buttons (e.g. tab, shift, accept, cancel);
// parameters here will override the settings in the buttonMarkup
buttonAction : { theme:'b' },
// theme added to button when it is active (e.g. shift is down)
// All extra parameters will be ignored
buttonActive : { theme:'e' }
});
});

});

Page code is:

<div data-role="page" id="mypage">

<div data-role="header" data-theme="a">
<h1>Page title</h1>

</div>

<div data-role="content" data-theme="b">

<form method="post" data-ajax="false" action="script.php">

<div data-role="fieldcontain">
<label for="keyboard">Input Field #:</label>
<input type="text" name="keyboard" id="keyboard" />
</div>

<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" name="submit" value="submit" data-inline="true">Submit</button>
</div>
<div class="ui-block-b">
<a data-role="button" data-rel="back" data-theme="b">Cancel</a>
</div>
</fieldset>

</form>
</div>
</div><!-- /page -->