就像您使用平板电脑时一样，每次您触摸输入文本字段时，浏览器都会触发虚拟键盘。
我试图开发相同的功能，但在我无法控制的网页（第三方网站，如谷歌）上的桌面上，但它们是使用 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 lib。另外，我不想跑题，但是如果您认为我可以使用 Windows 上已经可以执行的程序来解决这个问题，该程序在背景上运行并在输入处于焦点时触发并在失去焦点时触发也是可以接受的回答。
编辑：我使用应用内浏览器，是 AIR 开发平台的扩展。所以我使用 webkit 为 Kiosk 应用程序在我的应用程序中加载网页