带有引导主题的 Mottie 虚拟键盘

Posted 2023-02-25

【中文标题】带有引导主题的 Mottie 虚拟键盘

【英文标题】：Mottie virtual keyboard with bootstrap theme

【发布时间】：2016-08-21 07:41:11

【问题描述】：

我正在使用Mottie virtual keyboard 和它周围的angular wrapper，我想为我的键盘使用引导主题，我像这样添加它

VKI_CONFIG.css = 
                // input & preview
                input: 'form-control input-sm',
                // keyboard container
                container: 'center-block dropdown-menu', // jumbotron
                // default state
                buttonDefault: 'btn btn-default',
                // hovered button
                buttonHover: 'btn-primary',
                // Action keys (e.g. Accept, Cancel, Tab, etc);
                // this replaces "actionClass" option
                buttonAction: 'active',
                // used when disabling the decimal button dec
                // when a decimal exists in the input area
                buttonDisabled: 'disabled'
            ;

Here 你可以找到一个活生生的例子，当我浏览演示和在线使用这个键盘的例子时，比如here 和here，当浏览器窗口调整大小时，所有这些键盘都会调整大小，但是我根本没有那种行为，我在这里错过了什么吗？当我调整浏览器窗口的大小（使用引导主题）时，如何调整键盘的大小？

或者换句话说，如何使this 键盘在窗口调整大小时调整大小？

【问题讨论】：

是否可以在我的 Angular 5 应用程序中使用 Mottie 虚拟键盘。我试过。但我没有得到输出。你能帮帮我吗？

我不知道 angular 5，你可以问一个单独的问题，包装器很容易写，但我建议你找到一个完整的 angular 5 ish 解决方案，因为你依赖于 Jquery 和 jquery不能很好地与 Angular 5 配合使用。

【参考方案1】：

键盘没有专门为 Bootstrap 设置的 css 文件，因此需要以下媒体查询来调整键盘大小（另请参阅FAQ）。

我不知道这些设置有多准确，但请随意调整字体大小 - demo

/* Media Queries */
/* 240 x 320 (small phone)  */
@media all and (max-width: 319px) 
    .ui-keyboard .ui-keyboard-button  font-size: 9px; 
    .ui-keyboard .ui-keyboard-input  font-size: 12px; 


/* 320 x 480 (iPhone)  */
@media all and (min-width: 320px) and (max-width: 479px) 
    .ui-keyboard .ui-keyboard-button  font-size: 9px; 
    .ui-keyboard .ui-keyboard-input  font-size: 14px; 


/* 480 x 640 (small tablet) */
@media all and (min-width: 480px) and (max-width: 767px) 
    .ui-keyboard .ui-keyboard-button  font-size: 13px; 
    .ui-keyboard .ui-keyboard-input  font-size: 14px;