Multiple keyboard sizes on one page

[12Arjan]

I have a page with multiple inputs.
One is using the numpad layout and the other is using the qwerty layout.
I would like to have the numpad a larger font-size than the querty layout, is that possible? And if yes, how?

[Mottie]

Hi @12Arjan!

When the input/textarea has an ID assigned, the keyboard popup will get that same ID plus "_keyboard" added to the end (demo):

So this input:

<input id="numpad" type="text" />

will get a virtual keyboard with an ID of numpad_keyboard

<div id="numpad_keyboard" class="ui-keyboard" role="textbox">
   ...
</div>

So add css to target the specific keyboard:

#numpad_keyboard {
    font-size: 1.6em;
}

[Mottie]

Oh, and if you want to change the _keyboard id suffix, use the following javascript:

$.keyboard.css.idSuffix = '_virtual_keyboard';

[12Arjan]

Thank you very much for your explanation!