タブレットを使用する場合と同様に、入力テキスト フィールドに触れるたびに、ブラウザーが仮想キーボードを起動します。
私は同じ機能を開発しようとしていますが、ウェブページのデスクトップでは私の制御の範囲外 (Google のようなサードパーティのウェブサイト) ですが、それらは 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 で既に実行可能なプログラムを使用してこれを解決できると思われる場合も許容されます答え。
編集: アプリ内ブラウザーを使用している im は、AIR 開発プラットフォームの拡張機能です。キオスクアプリケーション用のWebkitを使用して、アプリ内にWebページをロードしています