角度简单的键盘

Question

我正在尝试以角度制作简单的键盘。当用户单击文本框时，我需要启用键盘，但是当我运行我的应用程序时，我得到了永久键盘。我的代码如下：：

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <input (input)="onInputChange($event)" class="input" value={{value}} placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
</div>

app.component.ts:

import { Component, ViewEncapsulation } from "@angular/core";
import Keyboard from 'simple-keyboard';

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: [
    '../../node_modules/simple-keyboard/build/css/index.css',
    './app.component.css'
  ]
})
export class AppComponent {
  value = '';
  keyboard: Keyboard;

  ngAfterViewInit() {
    this.keyboard = new Keyboard({
      onChange: input => this.onChange(input),
      onKeyPress: button => this.onKeyPress(button)
    });
  }

  onChange = (input: string) => {
    this.value = input;
    console.log('Input changed', input);
  };

  onKeyPress = (button: string) => {
    console.log('Button pressed', button);

    /**
     * If you want to handle the shift and caps lock buttons
     */
    if (button === '{shift}' || button === '{lock}') this.handleShift();
  };

  onInputChange = (event: any) => {
    this.keyboard.setInput(event.target.value);
  }

  handleShift = () => {
    let currentLayout = this.keyboard.options.layoutName;
    let shiftToggle = currentLayout === "default" ? "shift" : "default";

    this.keyboard.setOptions({
      layoutName: shiftToggle
    });
  };
}

我得到的输出如下：

output_keyboard

应用程序已加载键盘。但是我希望当我单击文本框时应该启用键盘。我该怎么做？

Answer 1

试试这个，我认为工作如你所愿

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <input on-focus="onInputFocus()" (input)="onInputChange($event)" class="input" value={{value}} placeholder="Tap on the virtual keyboard to start" />
    <div class="simple-keyboard"></div>
</div>

app.component.ts:

import { Component, ViewEncapsulation } from "@angular/core";
import Keyboard from 'simple-keyboard';

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: [
    '../../node_modules/simple-keyboard/build/css/index.css',
    './app.component.css'
  ]
})
export class AppComponent {
  value = '';
  keyboard: Keyboard;

  ngAfterViewInit() {
  }

onInputFocus() {
this.keyboard = new Keyboard({
      onChange: input => this.onChange(input),
      onKeyPress: button => this.onKeyPress(button)
    });
}

  onChange = (input: string) => {
    this.value = input;
    console.log('Input changed', input);
  };

  onKeyPress = (button: string) => {
    console.log('Button pressed', button);

    /**
     * If you want to handle the shift and caps lock buttons
     */
    if (button === '{shift}' || button === '{lock}') this.handleShift();
  };

  onInputChange = (event: any) => {
    this.keyboard.setInput(event.target.value);
  }

  handleShift = () => {
    let currentLayout = this.keyboard.options.layoutName;
    let shiftToggle = currentLayout === "default" ? "shift" : "default";

    this.keyboard.setOptions({
      layoutName: shiftToggle
    });
  };
}

https://stackblitz.com/edit/angular-ggxgjg