113 lines
2.7 KiB
JavaScript
113 lines
2.7 KiB
JavaScript
const Keyboard = window.SimpleKeyboard.default;
|
|
const KeyboardLayouts = window.SimpleKeyboardLayouts.default;
|
|
|
|
const layout = new KeyboardLayouts().get("chinese");
|
|
|
|
var inputDom;
|
|
|
|
var displayDefault = {
|
|
'{bksp}': 'backspace',
|
|
'{lock}': 'caps',
|
|
'{enter}': '> enter',
|
|
'{tab}': 'tab',
|
|
'{shift}': 'shift',
|
|
'{change}': '英文',
|
|
'{space}': ' ',
|
|
'{clear}': '清空',
|
|
'{close}': '关闭',
|
|
}
|
|
|
|
const myKeyboard = new Keyboard({
|
|
onChange: input => onChange(input),
|
|
onKeyPress: button => onKeyPress(button),
|
|
layoutCandidates: layout.layoutCandidates,
|
|
display: displayDefault,
|
|
layout: {
|
|
// 默认布局
|
|
default: [
|
|
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
|
|
'{tab} q w e r t y u i o p [ ] \\',
|
|
"{lock} a s d f g h j k l ; ' {enter}",
|
|
'{shift} z x c v b n m , . / {clear}',
|
|
'{change} {space} {close}',
|
|
],
|
|
// shift布局
|
|
shift: [
|
|
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
|
|
'{tab} Q W E R T Y U I O P { } |',
|
|
'{lock} A S D F G H J K L : " {enter}',
|
|
'{shift} Z X C V B N M < > ? {clear}',
|
|
'{change} {space} {close}',
|
|
],
|
|
},
|
|
// 按钮样式
|
|
buttonTheme: [
|
|
{
|
|
class: 'hg-red close',
|
|
buttons: '{close}',
|
|
},
|
|
{
|
|
class: 'change',
|
|
buttons: '{change}',
|
|
},
|
|
],
|
|
// 输入限制长度
|
|
//maxLength: this.maxLength,
|
|
});
|
|
|
|
|
|
function onChange(input) {
|
|
inputDom.value = input;
|
|
console.log("Input changed", input);
|
|
}
|
|
|
|
function onKeyPress(button, $event) {
|
|
// 点击关闭
|
|
if (button === '{close}') {
|
|
$(".keyboard").hide();
|
|
return false;
|
|
} else if (button === '{change}') {
|
|
// 切换中英文输入法
|
|
if (myKeyboard.options.layoutCandidates !== null) {
|
|
displayDefault["{change}"] = '中文';
|
|
// 切换至英文
|
|
myKeyboard.setOptions({
|
|
layoutCandidates: null,
|
|
display: displayDefault
|
|
});
|
|
} else {
|
|
// 切换至中文
|
|
displayDefault["{change}"] = '英文';
|
|
myKeyboard.setOptions({
|
|
layoutCandidates: layout.layoutCandidates,
|
|
display: displayDefault
|
|
});
|
|
}
|
|
} else if (button === '{clear}') {
|
|
console.log("清空")
|
|
clearKeyboard()
|
|
} else {
|
|
|
|
}
|
|
if (button === '{shift}' || button === '{lock}') this.handleShift();
|
|
}
|
|
// 切换shift/默认布局
|
|
function handleShift() {
|
|
let currentLayout = myKeyboard.options.layoutName;
|
|
let shiftToggle = currentLayout === 'default' ? 'shift' : 'default';
|
|
|
|
myKeyboard.setOptions({
|
|
layoutName: shiftToggle,
|
|
});
|
|
}
|
|
|
|
function clearKeyboard(){
|
|
myKeyboard.clearInput();
|
|
}
|
|
|
|
$(".keyboardBackground").click(function (){
|
|
$(".keyboard").hide();
|
|
})
|
|
|
|
|