与使用平板电脑时一样，每次触摸输入文本字段时，浏览器都会触发虚拟键盘。
我试图开发相同的功能，但在桌面上我的控件（谷歌等第三方网站）超大的网页，但他们使用php网关加载，所以我可以在他们上面插入代码。
我的一般想法是在jquery上使用this implementation：
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代码使其在所有站点中都能正常工作输入。
顺便说一下，我正在使用this jquery lib。此外，我不想偏离主题，但如果你认为我可以使用Windows上已经可执行的程序来解决这个问题，该程序在背景上运行并且在输入处于焦点时触发并且当输入失去焦点时也将是可接受的答案。
编辑：即时通讯使用应用内浏览器，是AIR开发平台的扩展。因此，我使用webkit为我的应用程序加载网页，用于Kiosk应用程序
答案 0 :(得分：0)
您是否考虑过开发浏览器扩展程序或UserScript / Greasemonkey脚本以包装所有输入元素？涉及的JS代码应该非常简单，我怀疑它甚至可以证明使用jQuery。
此解决方案仅适用于您控制客户端浏览器的情况，显然任何想要您的键盘功能的人都需要安装扩展程序/脚本。