H5页面调用自定义输入法案例
介绍
本示例介绍了@ohos.web.webview组件和Web以及CustomDialog接口实现H5页面调用自定义输入法的功能。 该场景多用于浏览器需要使用安全输入法时。
效果图预览
使用说明：
- 点击密码输入框，弹出自定义键盘。
- 在自定义键盘上输入内容，能成功映射到h5页面内。
实现步骤
实现H5页面调用自定义输入法，有两个关键点，一是需要将arkTS方法注册到h5页面中；二是要实现弹出键盘的组件。
- 构建一个 Browser 对象，集成浏览器的方法。创建一个自定义组件 TabletTitle，构成浏览器的工具栏。
// 自定义浏览器对象
export class Browser {
inputValue: string = "";
progress: number = 0;
isRegistered: boolean = false;
hideProgress: boolean = true;
tabsController: TabsController = new TabsController();
webController: WebviewController = new web_webview.WebviewController();
// 跳转页面
loadUrl(addr: string | Resource) {
this.webController.loadUrl(addr);
}
// 返回页面
back(): boolean {
if (this.webController.accessBackward()) {
this.webController.backward();
return true;
}
return false;
}
// 前进页面
forward() {
if (this.webController.accessForward()) {
this.webController.forward();
}
}
// 刷新页面
refresh() {
this.webController.refresh();
}
}
- 自定义键盘传入js对象 WebKeyboardObj， 构建两个函数：点击登录按钮事件和输入法弹窗弹出事件。其中输入法弹出事件中使用CustomDialog修饰的组件，打开自定义弹窗。
dialogController: CustomDialogController | null = new CustomDialogController({
builder: CustomKeyboard({
dialogClose: this.dialogClose,
items: this.items,
inputValue: this.inputValue,
curKeyboardType: this.curKeyboardType,
onKeyboardEvent: this.onKeyboardEvent,
closeDialog: this.closeDialog
}),
isModal: false,
alignment: DialogAlignment.Bottom,
customStyle: true
});
// ...
webKeyboardObj: WebKeyboardObj = {
// 点击登录按钮事件
login: () => {
promptAction.showToast({
message: $r('app.string.custom_keyboard_to_h5_login_button'),
duration: 2000
});
this.closeDialog();
},
// 输入法弹窗弹出事件
openDialog: (value: string) => {
this.dialogController?.open();
this.dialogClose = false;
if (value?.length) {
this.inputValue = value;
}
}
}
- 将webKeyboardObj对象通过webController.registerJavaScriptProxy注册到h5页面中,使页面中可以调用arkTS的方法。
// 注册方法到h5的js中
registerFunc(browser: Browser) {
if (!browser.isRegistered) {
browser.webController.registerJavaScriptProxy(this.webKeyboardObj, 'etsObj',
['login', 'openDialog'])
browser.isRegistered = true;
browser.webController.refresh();
}
}
- 构建一个h5页面，在js层中调用注册进入的arkTS方法。
<script>
function tapInput() {
document.activeElement.blur();
let input = document.getElementById("searchCon");
etsObj.openDialog(input.value); // 打开自定义弹窗
}
function setInput(value) {
let input = document.getElementById("searchCon");
input.value = value;
}
function login() {
etsObj.login(); // 点击登录按钮
}
</script>
高性能知识点
不涉及
工程结构&模块类型
customkeyboardtoh5 // har
|---components
| |---Browser.ets // 浏览器对象类型
| |---CustomKeyboard.ets // 自定义键盘组件
| |---TitleBar.ets // Web组件
|---model
| |---Constants.ets // 键盘组件对象类型
|---view
| |---BrowserSafeCheck.ets // 容器页面
模块依赖
不涉及