类似移动设备的键盘按需使用jquery和代码注入

就像你使用平板电脑一样，每次你触摸一个输入文本框，浏览器就会启动虚拟键盘。

我试图开发相同的功能，但在桌面的网页上超出我的控制(第三方网站，如谷歌)，但他们使用php网关加载，所以我可以在他们插入代码。

我的总体想法是在jquery上使用这个实现:

var simulateTyping = "Hello World!!1'b";
$('#keyboard').keyboard({
    // *** choose layout & positioning ***
    // choose from 'qwerty', 'alpha', 'international', 'dvorak', 'num' or
    // 'custom' (to use the customLayout below)
    layout: 'qwerty',
    customLayout: {
        'default': [
            'd e f a u l t',
            '{meta1} {meta2} {accept} {cancel}'
            ],
        'meta1': [
            'm y m e t a 1',
            '{meta1} {meta2} {accept} {cancel}'
            ],
        'meta2': [
            'M Y M E T A 2',
            '{meta1} {meta2} {accept} {cancel}'
            ]
    },
    // Used by jQuery UI position utility
    position: {
        of: null, // null = attach to input/textarea; use $(sel) to attach elsewhere
        my: 'center top',
        at: 'center top',
        at2: 'center bottom' // used when "usePreview" is false
    },
    // true: preview added above keyboard; false: original input/textarea used
    usePreview: true,
    // if true, the keyboard will always be visible
    alwaysOpen: false,
    // if true, keyboard will remain open even if the input loses focus.
    stayOpen: false,
    // *** change keyboard language & look ***
    display: {
        'meta1' : ''u2666', // Diamond
        'meta2' : ''u2665', // Heart
        'a'     : ''u2714:Accept (Shift-Enter)', // check mark (accept)
        'accept': 'Accept:Accept (Shift-Enter)',
        'alt'   : 'AltGr:Alternate Graphemes',
        'b'     : ''u2190:Backspace', // Left arrow (same as ←)
        'bksp'  : 'Bksp:Backspace',
        'c'     : ''u2716:Cancel (Esc)', // big X, close/cancel
        'cancel': 'Cancel:Cancel (Esc)',
        'clear' : 'C:Clear', // clear num pad
        'combo' : ''u00f6:Toggle Combo Keys',
        'dec'   : '.:Decimal', // num pad decimal '.' (US) & ',' (EU)
        'e'     : ''u21b5:Enter', // down, then left arrow - enter symbol
        'enter' : 'Enter:Enter',
        'lock'  : ''u21ea Lock:Caps Lock', // caps lock
        's'     : ''u21e7:Shift', // thick hollow up arrow
        'shift' : 'Shift:Shift',
        'sign'  : ''u00b1:Change Sign', // +/- sign for num pad
        'space' : ' :Space',
        't'     : ''u21e5:Tab', // right arrow to bar
        'tab'   : ''u21e5 Tab:Tab' // 'u21b9 is the true tab symbol
    },
    // Message added to the key title while hovering, if the mousewheel plugin exists
    wheelMessage: 'Use mousewheel to see other keys',
    css : {
        // input & preview
        input          : 'ui-widget-content ui-corner-all',
        // keyboard container
        container      : 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix', 
        // default state
        buttonDefault  : 'ui-state-default ui-corner-all',
        // hovered button
        buttonHover    : 'ui-state-hover',
        // Action keys (e.g. Accept, Cancel, Tab, etc); this replaces
        // "actionClass" option
        buttonAction   : 'ui-state-active',
        // used when disabling the decimal button {dec} when a decimal exists
        // in the input area
        buttonDisabled : 'ui-state-disabled'
        },
    // *** Useability ***
    // Auto-accept content when clicking outside the keyboard (popup will close)
    autoAccept: false,
    // Prevents direct input in the preview window when true
    lockInput: false,
    // Prevent keys not in the displayed keyboard from being typed in
    restrictInput: false,

    acceptValid  : true,

    tabNavigation: false,

    enterNavigation : false,
    enterMod : 'altKey',

    appendLocally: false,
    stickyShift  : true,
    preventPaste: false,

    maxLength: false,

    repeatDelay  : 500,
    repeatRate   : 20,   
    // resets the keyboard to the default keyset when visible
    resetDefault : false,
    // Event (namespaced) on the input to reveal the keyboard.
    // To disable it, just set it to ''.
    openOn: 'focus',
    // Event (namepaced) for when the character is added to the input
    // (clicking on the keyboard)
    keyBinding: 'mousedown',
    // combos (emulate dead keys)
    // if user inputs `a the script converts it to à, ^o becomes ô, etc.
    useCombos: true,
    // if you add a new combo, you may need to update the regex below
    combos: {
// uncomment out the next line, then read the Combos Regex section below
//        '<': { 3: ''u2665' }, // turn <3 into ♥ - change regex below
        'a': { e: "'u00e6" }, // ae ligature
        'A': { E: "'u00c6" },
        'o': { e: "'u0153" }, // oe ligature
        'O': { E: "'u0152" }
    },

    initialized : function(e, keyboard, el) {},
    visible     : function(e, keyboard, el) {},
    change      : function(e, keyboard, el) {},
    beforeClose : function(e, keyboard, el, accepted) {},
    accepted    : function(e, keyboard, el) {},
    canceled    : function(e, keyboard, el) {},
    hidden      : function(e, keyboard, el) {},

    switchInput : function(keyboard, goToNext, isAccepted) {},

    validate    : function(keyboard, value, isClosing) { return true; }
}) 
    // activate the typing extension
    .addTyping();

$('#keyboard').getkeyboard().regex = /([`''~'^'"ao])([a-z])/mig;
// Typing Extension
$('#icon').click(function() {
    var kb = $('#keyboard').getkeyboard();
    kb.reveal().typeIn(simulateTyping, 500, function() {
        // do something after text is added
        // kb.accept();
    });
});

要做到这一点，我需要使用:

<div id="wrap">
    <input id="keyboard" type="text">
    <img id="icon" src="http://mottie.github.com/Keyboard/demo/keyboard.png">
</div>

所以在理论上我需要插入一个id和一个换行div到每个输入和文本字段的网站，但我很困惑如何做到这一点，以及如何重新利用jquery代码，使其在所有网站的输入工作。

顺便说一下，我使用这个jquery库。另外，我不想跑题，但如果你认为我可以用一个已经在Windows上运行的可执行程序来解决这个问题，当输入焦点时触发，当它失去焦点时消失，这也是一个可以接受的答案。

编辑:我使用的是应用内浏览器，是AIR开发平台的扩展。所以我在我的应用程序中加载网页使用webkit为Kiosk应用程序