如何使用‘ng-虚拟键盘’在角度6？
如何使用‘ng-虚拟键盘’在角度6？
提问于 2021-02-18 13:56:45
我正在尝试将ng-virtual-keyboard集成到我的Angular6项目中。但这不管用！
我做的步骤-
npm install ng-virtual-keyboardnpm install --save @types/virtual-keyboard(在‘https://github.com/Mottie/Keyboard'’的'TypeScript‘部分中提到的这个命令)- 在索引页的Head标记中添加
angular.min.js和jquery.min.js脚本。
index.html -
<!doctype html>
<html lang="en">
<head>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>- 将
ng-virtual-keyboard包括在app.module.ts中(获取错误-找不到模块‘ng-虚拟-键盘’)
app.module.ts -
...
import { NgVirtualKeyboardModule } from 'ng-virtual-keyboard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgVirtualKeyboardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- app.component.html -
<input type='text' ng-model="yourModel" ng-virtual-keyboard/> - app.component.ts -
import { Component } from '@angular/core';@Component({...})export class AppComponent { } - angular.json -
"scripts": ["./node_modules/ng-virtual-keyboard/dist/ng-virtual-keyboard.js"] - 在输入框中单击后，什么都没有发生.
package.json -
{
"dependencies": {
"@angular/compiler": "^6.1.10",
"@angular/core": "^6.1.10",
...
"@types/virtual-keyboard": "^1.26.1",
"ng-virtual-keyboard": "^0.4.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "^0.8.28"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.12.2",
"@angular/cli": "^7.2.2",
"@angular/compiler-cli": "^6.1.10",
...
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "^2.9.2"
}
}参考网址：-
请帮帮忙。
Stack Overflow用户
发布于 2021-03-11 09:03:28
安装这个棱角虚拟键盘，它应该支持您的Angular版本，但不支持后续版本：xroussel/ng-虚拟键盘。
如何根据dokumentation:安装它
步骤1：npm install --save @protacon/ng-virtual-keyboard
步骤2:将NgVirtualKeyboardModule作为导入添加到应用程序的根模块app.module.ts中
import { NgVirtualKeyboardModule } from '@protacon/ng-virtual-keyboard';
@NgModule({
...
imports: [
...
NgVirtualKeyboardModule,
],
...
})
export class AppModule { }将此添加到您的HTML文件中并准备就绪：
<input type="text" value=""
ng-virtual-keyboard
ng-virtual-keyboard-layout="alphanumeric"
ng-virtual-keyboard-placeholder="test"
ng-virtual-keyboard-type="password"
/>如果这不起作用，你可以试试simple-keyboard，这里的一个工作示例只有HTML和Javascript
注意：还有一种用npm实现它的方法，在这里跳过<link>和<script>标记：简单键盘
const Keyboard = window.SimpleKeyboard.default;
const myKeyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button)
});
function onChange(input) {
document.querySelector(".input").value = input;
console.log("Input changed", input);
}
function onKeyPress(button) {
console.log("Button pressed", button);
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
</head>
<body>
<input class="input" placeholder="Tap on the virtual keyboard to start" />
<div class="simple-keyboard"></div>
<script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script>
<script src="src/index.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66261460
复制相关文章
相似问题
腾讯云开发者
