定位弹出式键盘

Question

我从github找到了一个插件，当你点击文本框/文本区域时，它会弹出一个虚拟键盘。问题是，如果你有其他元素，键盘会出现在底部。我希望它显示在单击的文本框旁边。我试着附加".位置"({my："左上"，位于："左上"，的："#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/