The electron-virtual-keyboard from digithinkit

TouchStart event to show key was pressed on touchscreen is not working

Hover class over they keyboard keys works fine as it shows
hover & which key was clicked
But in case of touchscreen : hover class dose not work.!!
are there any class to override style of key press with touch. ??
help appreciated

multilanguage support

hi,
is this keyboard support languages other than en?

[QUESTION] It is possible to use with a webview tag?

Hi!

I have a minimal app that shows a website using the webview tag in electron ( f.e. www.google.com ) in a kiosk mode view.

Could this package be used to interact with the various inputs in the pages that would be displayed?

For example, with the input of the google search engine.

I've trying with the method proposed in the README, but it doesn't work.

Code:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> -->
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
    <script>
      var jquery = $ = require('jquery');
      require('electron-virtual-keyboard/client')(window, jquery);
    </script>
    <link href="node_modules/electron-virtual-keyboard/virtual-keyboard.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="close-button-container">
      <button id="close-button">Menu</button>
    </div>
    <webview src="https://www.google.com" id="webview" autosize="on" style="width: 100vw; height: 100vh;" plugins></webview>
    <script>
      var keyboard = $('input').keyboard();
    </script>
  </body>
</html>

Preload.js

/**
 * The preload script runs before. It has access to web APIs
 * as well as Electron's renderer process modules and some
 * polyfilled Node.js functions.
 *
 * https://www.electronjs.org/docs/latest/tutorial/sandbox
 */
window.addEventListener("DOMContentLoaded", () => {
  onload = () => {
    const closeButton = document.getElementById("close-button");

    closeButton.addEventListener("click", () => {
      window.close();
    });
  };
});

Main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow, session, components } = require("electron");
const path = require("path");
const VirtualKeyboard = require("electron-virtual-keyboard");

let vkb;
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    kiosk: true,
    autoHideMenuBar: true,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      webviewTag: true,
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // Search for the url in the command line arguments
  let url = process.argv.find((arg) => arg.startsWith("http"));
  // If url is empty, set url to https://www.google.com
  if (!url) {
    url = "https://www.google.com";
  }

  // Replace the src attribute of the webview with the url
  mainWindow.webContents.on("dom-ready", () => {
    mainWindow.webContents.executeJavaScript(
      `document.getElementById('webview').src = '${url}';`
    );
  });

  // and load the index.html of the app.
  mainWindow.loadFile("index.html");

  vkb = new VirtualKeyboard(window.webContents);

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(async () => {
  await components.whenReady();
  console.log("Components status: ", components.status());

  createWindow();

  // app.on("activate", function () {
  //   // On macOS it's common to re-create a window in the app when the
  //   // dock icon is clicked and there are no other windows open.
  //   if (BrowserWindow.getAllWindows().length === 0) createWindow();
  // });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
  // Clear all session data and cache
  session.defaultSession.clearCache();
  session.defaultSession.clearStorageData();

  // Then close the app
  if (process.platform !== "darwin") app.quit();
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

theres no way to update the inputs once you have initialized the keyboard

I made an angularjs application with multiple pages. I need to update the $('input') selector every time the page changes. I tried initializing the keyboard every time but it doesn't work (the focus remains always on the first input).

Is there a way to completely remove the keyboard so that I can create a new one? Or a way to update the given inputs?

Thanks

Proper usage on react

Hello,
I am using this on an application which was bootstrapped using create-react-app.
The keyboard is working fine when I am using it on individual components but the problem occurs when am navigating away from that components, it is creating an instance every time I mount the components.
I taught that making a global instance on the root might solve the problem but now it's not automatically showing up when I focus on the input elements. So my question is should is there a way to unmount the components after it is mounted

digithinkit / electron-virtual-keyboard Goto Github PK

electron-virtual-keyboard's People

Contributors

Stargazers

Watchers

Forkers

electron-virtual-keyboard's Issues

TouchStart event to show key was pressed on touchscreen is not working

multilanguage support

[QUESTION] It is possible to use with a webview tag?

theres no way to update the inputs once you have initialized the keyboard

Proper usage on react

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent