magic4

static/Magic4/js/keyboard.js

@@ -0,0 +1,112 @@
+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();
+})
+
+