不能将虚拟键盘jQuery插件与Angular 4 + Webpack一起使用

Question

I'm trying to use virtual keyboard on Angular 4 template from Asp Core +webpack I've installed with npm install --save-dev @types/virtual-keyboard in webpack.config.vendor.js I put this line:

const treeShakableModules = [
    .....
    'virtual-keyboard',
   ...
];

in my component template:

<input id="mycontrol" type="text">

in .ts:

import * as jQuery from "jquery";
import { KeyboardOptions, NavigateOptions } from "virtual-keyboard";

const kbOptions: KeyboardOptions = {
    display: {
        bksp: "\u2190",
        accept: `Next`,
        cancel: `Back`,
        normal: "ABC",
        meta1: "#+-",
        space: "Space",
        alt: `Alt`,
        s: `ABC`,
    },
    acceptValid: true,
    type: "input",
    layout: "custom",
    customLayout: {
        normal: [
            `a b c d e f g h i j k l m`,
            `n o p q r s t u v x y z w`,
            `1 2 3 4 5 6 7 8 9 0 . _ @`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
        shift: [
            `A B C D E F G H I J K L M`,
            `N O P Q R S T U V X Y Z W`,
            `1 2 3 4 5 6 7 8 9 0 . _ @`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
        meta1: [
            `- / : ; ( ) \u20ac & \" ! ? ' \``,
            `[ ] { } # % ^ * + = ° ´ §`,
            ` \\ | ~ < > $ \u00a3 \u00a5 , ' ² ³`,
            `{space} {meta1} {bksp}`,
            `{cancel}  {accept}`
        ],
        "alt-shift": [
            `A B C D E F G H I J K L M N O`,
            `P Q R S T U V X Y Z W \u00df \u00dc \u00d6 \u00c4`,
            `1 2 3 4 5 6 7 8 9 0 . _ @ \u0301`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
        alt: [
            `a b c d e f g h i j k l m n o`,
            `p q r s t u v x y z w \u00df \u00fc \u00f6 \u00e4`,
            `1 2 3 4 5 6 7 8 9 0 . _ @ \u0301`,
            `{alt} {s} {space} {meta1} {s} {bksp} `,
            `{cancel}  {accept}`
        ],
    },
    lockInput: true,
    alwaysOpen: true,
    appendLocally: true,
    color: "light",
    class: "sxcycx",
    updateOnChange: true,
    usePreview: false,
    tabNavigation: false,
    canceled: () => { console.log("cancelled"); }
};

const navOptions: NavigateOptions = {
    position: [0, 0],
    toggleMode: true,
    focusClass: "hasFocus",
    rowLooping: true,
};

then

ngAfterViewInit(): any {
             try {



jQuery('#mycontrol').css("background-color", "red");  //I see the change
jQuery('#mycontrol').keyboard(kbOptions).addNavigation(navOptions);

....

in console there is no error but focusing textbox there is no keyboard shown I think there must be things to be put in webpack.config.vendor.js

thanks

Answer 1

Install jquery and virtual-keyboard via npm. And try this:

// In *.ts file:
import * as $ from 'jquery';
import 'virtual-keyboard';

$('.vk').keyboard({
  change: (e, keyboard, el) => {
    // Dispatch input event to notify angular about changes
    const inputEvent: any = document.createEvent('CustomEvent');
    inputEvent.initEvent('input', true, true);
    el.dispatchEvent(inputEvent);
  }
});

// In scss:

@import "../../node_modules/virtual-keyboard/dist/css/keyboard-dark.min";

BTW, to be able to subscribe to virtual keyboard events it's better to create directive and initialize keyboard there.