js_lis 2.0.7 → 2.0.8

package/VirtualKeyboard.js

@@ -79,15 +79,26 @@ export class VirtualKeyboard {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
         if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardInput(target);
+          this.handleRealKeyboardInput(target, e);
         }
       }
     });
 
-    // Add real keyboard arrow key support
+    // Add real keyboard keydown listener for proper character tracking
     document.addEventListener("keydown", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
+        // Reset the virtual keyboard flag when real keyboard is used
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
+          this.isVirtualKeyboardActive = false;
+        }
+        
+        // Handle real keyboard input
+        if (!this.isVirtualKeyboardActive) {
+          this.handleRealKeyboardKeydown(target, e);
+        }
+        
+        // Handle arrow keys for all input types
         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
           setTimeout(() => {
             target.focus();
@@ -156,6 +167,7 @@ export class VirtualKeyboard {
 
     const layoutSelector = document.createElement("select");
     layoutSelector.id = "layout-selector";
+    layoutSelector.setAttribute("aria-label", "Select keyboard layout"); // ✅ เพิ่มบรรทัดนี้
     layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
 
     const layouts = ["full", "en", "th", "numpad", "symbols"];
@@ -168,6 +180,7 @@ export class VirtualKeyboard {
     layoutSelector.value = this.currentLayout;
     controlsContainer.appendChild(layoutSelector);
 
+
     keyboard.appendChild(controlsContainer);
 
     const layout = this.layouts[this.currentLayout];
@@ -188,13 +201,14 @@ export class VirtualKeyboard {
           keyElement.classList.add("concat-keys");
         }
 
-        if (key === "Space") {
+        if (key === " ") {
           keyElement.className += " space";
+          keyElement.innerHTML = 'ฺ';
         }
 
         if (key === "backspace" || key === "Backspace") {
           keyElement.className += " backspacew";
-          keyElement.innerHTML = '<i class="fa fa-backspace"></i>';
+          keyElement.innerHTML = '<i class="fa fa-backspace"></i>ฺ';
         }
 
         keyElement.onclick = (e) => {
@@ -474,6 +488,9 @@ export class VirtualKeyboard {
     this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
+    
+    // Reset the flag after virtual keyboard operation is complete
+    this.isVirtualKeyboardActive = false;
   }
 
   // [3]
@@ -525,18 +542,110 @@ export class VirtualKeyboard {
     }
   }
 
-  // Handle real keyboard input and encrypt it
-  handleRealKeyboardInput(input) {
+  // Handle real keyboard keydown events to track actual input before masking
+  handleRealKeyboardKeydown(input, event) {
     if (!input) return;
     
-    // Get the current value from the input
-    const currentValue = input.value;
+    const key = event.key;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    const buffer = this.getCurrentBuffer();
+    
+    // Skip modifier keys and special keys
+    if (event.ctrlKey || event.altKey || event.metaKey || 
+        ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock', 'Tab', 'Escape', 
+         'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End',
+         'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'].includes(key)) {
+      return;
+    }
     
-    // Update the plaintext buffer with the real keyboard input
-    this.inputPlaintextBuffers.set(input, currentValue);
+    let newBuffer = buffer;
+    
+    if (key === 'Backspace') {
+      if (start === end && start > 0) {
+        // Single character deletion
+        newBuffer = buffer.slice(0, start - 1) + buffer.slice(start);
+      } else if (start !== end) {
+        // Range deletion
+        newBuffer = buffer.slice(0, start) + buffer.slice(end);
+      }
+      
+      // Prevent default and update manually
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+      
+      // Set cursor position
+      const newCursorPos = start === end ? Math.max(0, start - 1) : start;
+      setTimeout(() => {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+        input.focus();
+      }, 0);
+      
+    } else if (key === 'Delete') {
+      if (start === end && start < buffer.length) {
+        // Single character deletion forward
+        newBuffer = buffer.slice(0, start) + buffer.slice(start + 1);
+      } else if (start !== end) {
+        // Range deletion
+        newBuffer = buffer.slice(0, start) + buffer.slice(end);
+      }
+      
+      // Prevent default and update manually
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+      
+      // Set cursor position
+      setTimeout(() => {
+        input.setSelectionRange(start, start);
+        input.focus();
+      }, 0);
+      
+    } else if (key === 'Enter') {
+      if (input.tagName === 'TEXTAREA') {
+        newBuffer = buffer.slice(0, start) + '\n' + buffer.slice(end);
+        
+        // Prevent default and update manually
+        event.preventDefault();
+        this.setCurrentBuffer(newBuffer);
+        this.updateDisplayedValue(false);
+        
+        // Set cursor position
+        const newCursorPos = start + 1;
+        setTimeout(() => {
+          input.setSelectionRange(newCursorPos, newCursorPos);
+          input.focus();
+        }, 0);
+      }
+      // For input fields, let the default behavior handle form submission
+      
+    } else if (key.length === 1) {
+      // Regular character input
+      newBuffer = buffer.slice(0, start) + key + buffer.slice(end);
+      
+      // Prevent default and update manually
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+      
+      // Set cursor position
+      const newCursorPos = start + key.length;
+      setTimeout(() => {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+        input.focus();
+      }, 0);
+    }
+  }
+
+  // Handle real keyboard input and encrypt it (simplified version)
+  handleRealKeyboardInput(input, event) {
+    if (!input) return;
     
-    // Encrypt and store in data-encrypted attribute
-    this.updateDomEncrypted(input, currentValue);
+    // For most cases, the keydown handler already took care of updating the buffer
+    // This method now just ensures the encryption is up to date
+    const currentBuffer = this.getCurrentBuffer();
+    this.updateDomEncrypted(input, currentBuffer);
   }
 
   // Helper: encrypt and store ciphertext in DOM attribute

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js_lis",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"