From 4a5b75532e31676e59d365b1f5a3cdcee506c761 Mon Sep 17 00:00:00 2001 From: zhaohe Date: Sat, 21 Dec 2024 18:29:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E8=B0=83=E8=AF=95=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=94=AE=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/debug/index.html | 24 ++++- html/debug/virtual-keyboard.js | 234 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 256 insertions(+), 2 deletions(-) create mode 100644 html/debug/virtual-keyboard.js diff --git a/html/debug/index.html b/html/debug/index.html index 2682254..31a26ab 100644 --- a/html/debug/index.html +++ b/html/debug/index.html @@ -16,7 +16,7 @@ - + @@ -44,7 +44,8 @@ {{enumValue}} - + + 执行 @@ -92,6 +93,8 @@ return this.actions.map(i => ({ key: i.key, label: i.key })); } }, + mounted() { + }, methods: { // connect actionConnect() { @@ -130,6 +133,23 @@ this.logs = []; }, + showKeyboard(values, param) { + const inputElement = document.querySelector(`input[placeholder="${param}"]`); + if (inputElement) { + VirtualKeyboard.show(inputElement); + this.updateDisplayContainer(inputElement); + } + }, + + updateDisplayContainer(inputElement) { + const displayContainer = document.querySelector('.virtual-keyboard-display'); + if (displayContainer) { + inputElement.addEventListener('input', () => { + displayContainer.textContent = inputElement.value; + }); + } + }, + // action list reload actionListReload(response) { let data = response.rely; diff --git a/html/debug/virtual-keyboard.js b/html/debug/virtual-keyboard.js new file mode 100644 index 0000000..9746113 --- /dev/null +++ b/html/debug/virtual-keyboard.js @@ -0,0 +1,234 @@ +class VirtualKeyboard { + static show(inputElement) { + // Create the virtual keyboard container + const keyboardContainer = document.createElement('div'); + keyboardContainer.classList.add('virtual-keyboard'); + document.body.appendChild(keyboardContainer); + + // Create the display container for input characters + const displayContainer = document.createElement('div'); + displayContainer.classList.add('virtual-keyboard-display'); + document.body.appendChild(displayContainer); + + // Create the text display box above the number keys + const textDisplayBox = document.createElement('div'); + textDisplayBox.classList.add('virtual-keyboard-text-display'); + textDisplayBox.style.height = '40px'; // Initialize height + textDisplayBox.textContent = inputElement.value; // Initialize content + keyboardContainer.appendChild(textDisplayBox); + + // Define the keys for the virtual keyboard + const keyLayout = [ + ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'Backspace'], + ['Tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'Del'], + ['CapsLock', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'Enter'], + ['Shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'Shift'], + ['Space'] + ]; + + let isShift = false; + let isCapsLock = false; + + // Create buttons for each key + keyLayout.forEach(row => { + const rowContainer = document.createElement('div'); + rowContainer.classList.add('virtual-keyboard-row'); + row.forEach(key => { + const keyButton = document.createElement('button'); + keyButton.textContent = key; + keyButton.classList.add(`key-${key.toLowerCase()}`); + keyButton.addEventListener('mousedown', (event) => { + event.preventDefault(); // Prevent losing focus from the input element + keyButton.classList.add('active'); // Add active class on mousedown + if (key === 'Backspace') { + inputElement.value = inputElement.value.slice(0, -1); + } else if (key === 'Del') { + inputElement.value = ''; + } else if (key === 'Tab') { + inputElement.value += '\t'; + } else if (key === 'Space') { + inputElement.value += ' '; + } else if (key === 'Enter') { + document.body.removeChild(keyboardContainer); + document.body.removeChild(displayContainer); + } else if (key === 'Shift') { + // isShift = !isShift; + // this.toggleShift(keyButton, isShift); + } else if (key === 'CapsLock') { + isCapsLock = !isCapsLock; + this.toggleCapsLock(keyButton, isCapsLock); + } else { + inputElement.value += isCapsLock ? key.toUpperCase() : key.toLowerCase(); + } + inputElement.dispatchEvent(new Event('input')); // Trigger input event to update Vue binding + displayContainer.textContent = inputElement.value; // Update display container with input value + textDisplayBox.textContent = inputElement.value; // Update text display box with input value + }); + keyButton.addEventListener('mouseup', () => { + keyButton.classList.remove('active'); // Remove active class on mouseup + keyButton.style.background = '#fff'; // Reset background immediately + }); + keyButton.addEventListener('mouseleave', () => { + keyButton.classList.remove('active'); // Remove active class if mouse leaves the button + keyButton.style.background = '#fff'; // Reset background immediately + }); + rowContainer.appendChild(keyButton); + }); + keyboardContainer.appendChild(rowContainer); + }); + + // Position the keyboard at the bottom of the screen + keyboardContainer.style.position = 'fixed'; + keyboardContainer.style.bottom = '0'; + keyboardContainer.style.left = '50%'; + keyboardContainer.style.transform = 'translateX(-50%)'; + keyboardContainer.style.width = '100%'; + keyboardContainer.style.maxWidth = '800px'; + keyboardContainer.style.margin = '0 auto'; + keyboardContainer.style.border = '1px solid #999'; + + // Position the display container above the keyboard + displayContainer.style.position = 'fixed'; + displayContainer.style.bottom = 'calc(100% + 10px)'; + displayContainer.style.left = '50%'; + displayContainer.style.transform = 'translateX(-50%)'; + displayContainer.style.width = '100%'; + displayContainer.style.maxWidth = '800px'; + displayContainer.style.textAlign = 'center'; + displayContainer.style.padding = '10px'; + displayContainer.style.background = '#f0f0f0'; + displayContainer.style.borderTop = '1px solid #999'; + displayContainer.style.boxShadow = '0 -2px 10px rgba(0, 0, 0, 0.1)'; + displayContainer.style.zIndex = '1000'; + + // Style the text display box + textDisplayBox.style.width = '100%'; + textDisplayBox.style.padding = '10px'; + textDisplayBox.style.background = '#e0e0e0'; + textDisplayBox.style.textAlign = 'center'; + textDisplayBox.style.fontSize = '18px'; + textDisplayBox.style.marginBottom = '10px'; + + // Hide the keyboard and display container when the input loses focus + inputElement.addEventListener('blur', () => { + setTimeout(() => { + if (document.activeElement !== inputElement) { + document.body.removeChild(keyboardContainer); + document.body.removeChild(displayContainer); + } + }, 30); + }); + } + + static toggleShift(button, isShift) { + button.classList.toggle('active', isShift); + } + + static toggleCapsLock(button, isCapsLock) { + const keys = document.querySelectorAll('.virtual-keyboard button'); + keys.forEach(key => { + if (key.textContent.length === 1 && key.textContent.match(/[a-z]/i)) { + key.textContent = isCapsLock ? key.textContent.toUpperCase() : key.textContent.toLowerCase(); + } + }); + } +} + +// Add some basic styles for the virtual keyboard +const style = document.createElement('style'); +style.textContent = ` + .virtual-keyboard { + display: flex; + flex-direction: column; + background: #f0f0f0; + padding: 10px; + border-top: 1px solid #999; + border: 1px solid #999; + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); + z-index: 1000; + max-width: 800px; + margin: 0 auto; + } + .virtual-keyboard-row { + display: flex; + justify-content: center; + margin-bottom: 5px; + } + .virtual-keyboard button { + margin: 5px; + padding: 15px; + font-size: 18px; + cursor: pointer; + border: none; + border-radius: 5px; + background: #fff; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + transition: background 0.3s, box-shadow 0.3s; + flex: 1 1 8%; + max-width: 60px; + } + .virtual-keyboard button:hover { + background: #e0e0e0; + } + .virtual-keyboard button:active { + background: #d0d0d0; + box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); + } + .virtual-keyboard button.active { + background: #d0d0d0; + } + .virtual-keyboard .key-backspace { + flex: 1 1 10%; + max-width: 100px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + } + .virtual-keyboard .key-enter { + flex: 1 1 10%; + max-width: 100px; + } + .virtual-keyboard .key-shift { + flex: 1 1 15%; + max-width: 150px; + } + .virtual-keyboard .key-capslock, + .virtual-keyboard .key-tab, + .virtual-keyboard .key-del { + flex: 1 1 10%; + max-width: 100px; + } + .virtual-keyboard .key-space { + flex: 1 1 60%; + max-width: 400px; + } + .virtual-keyboard-display { + font-size: 24px; + color: #333; + } + .virtual-keyboard-text-display { + width: 100%; + padding: 10px; + background: #e0e0e0; + text-align: center; + font-size: 18px; + margin-bottom: 10px; + } + .virtual-keyboard-row:first-child { + justify-content: space-between; + } + .virtual-keyboard-row:nth-child(2) { + justify-content: space-between; + } + .virtual-keyboard-row:nth-child(3) { + justify-content: space-between; + } + .virtual-keyboard-row:nth-child(4) { + justify-content: space-between; + } + .virtual-keyboard-row:nth-child(5) { + justify-content: center; + } +`; +document.head.appendChild(style); \ No newline at end of file