Question

我从github找到了一个插件，当您单击文本框/文本区域时，该插件会弹出虚拟键盘。问题是，如果您还有其他元素，键盘将显示在底部。我希望它显示在单击的文本框旁边。我尝试附加“ .position（{ 我的：“左上”，在：“左上”， of：“ #targetElement” }）;“位于键盘初始化程序（最后一行）的末尾，但没有生效。这是脚本。

<script type="text/javascript">
            $(function(){
                var keyboard = {
                    'layout': [
                        // alphanumeric keyboard type
                        // text displayed on keyboard button, keyboard value, keycode, column span, new row
                        [
                            [
                                ['`', '`', 192, 0, true], ['1', '1', 49, 0, false], ['2', '2', 50, 0, false], ['3', '3', 51, 0, false], ['4', '4', 52, 0, false], ['5', '5', 53, 0, false], ['6', '6', 54, 0, false], 
                                ['7', '7', 55, 0, false], ['8', '8', 56, 0, false], ['9', '9', 57, 0, false], ['0', '0', 48, 0, false], ['-', '-', 189, 0, false], ['=', '=', 187, 0, false],
                                ['q', 'q', 81, 0, true], ['w', 'w', 87, 0, false], ['e', 'e', 69, 0, false], ['r', 'r', 82, 0, false], ['t', 't', 84, 0, false], ['y', 'y', 89, 0, false], ['u', 'u', 85, 0, false], 
                                ['i', 'i', 73, 0, false], ['o', 'o', 79, 0, false], ['p', 'p', 80, 0, false], ['[', '[', 219, 0, false], [']', ']', 221, 0, false], ['&#92;', '\\', 220, 0, false],
                                ['a', 'a', 65, 0, true], ['s', 's', 83, 0, false], ['d', 'd', 68, 0, false], ['f', 'f', 70, 0, false], ['g', 'g', 71, 0, false], ['h', 'h', 72, 0, false], ['j', 'j', 74, 0, false], 
                                ['k', 'k', 75, 0, false], ['l', 'l', 76, 0, false], [';', ';', 186, 0, false], ['&#39;', '\'', 222, 0, false], ['Enter', '13', 13, 3, false],
                                ['Shift', '16', 16, 2, true], ['z', 'z', 90, 0, false], ['x', 'x', 88, 0, false], ['c', 'c', 67, 0, false], ['v', 'v', 86, 0, false], ['b', 'b', 66, 0, false], ['n', 'n', 78, 0, false], 
                                ['m', 'm', 77, 0, false], [',', ',', 188, 0, false], ['.', '.', 190, 0, false], ['/', '/', 191, 0, false], ['Shift', '16', 16, 2, false],
                                ['Bksp', '8', 8, 3, true], ['Space', '32', 32, 12, false], ['Clear', '46', 46, 3, false], ['Cancel', '27', 27, 3, false]
                            ]
                        ]
                    ]   
                }
                $('#name.jQKeyboard').initKeypad({'keyboardLayout': keyboard});
                
            });
        </script>

Answer 1

如果我们在谈论：https://github.com/poiyee/jQKeyboard，那么我建议：

$('#name.jQKeyboard').initKeypad({'keyboardLayout': keyboard});
$('#jQKeyboardContainer').position({
  my: "left top",
  at: "left top",
  of: $('#name.jQKeyboard')
});

该插件是以较旧的方式编写的，我建议或考虑使用$.widget()来编写您自己的插件，允许您将position设置为选项。

如果您想要一个现代的工作窗口小部件，它将看起来像这样：https://jsfiddle.net/Twisty/mzj9w2yb/4/

放置弹出键盘

1 个答案: