H5页面输入框自动获焦弹起软键盘

​H5页面输入框自动获焦弹起软键盘

HarmonyOS
2024-05-20 20:56:33
浏览
已于2024-5-21 16:56:30修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
电子土豆片

使用web组件加载一个html,在html里有一个输入框,在此处加上js的获焦方法,当该页面加载完成后自动弹出软键盘。

核心代码:

import inputMethod from '@ohos.inputMethod'; 
import { BusinessError } from '@ohos.base'; 
import web_webview from '@ohos.web.webview' 
 
@Entry 
@Component 
struct Index { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  inputMethodController = inputMethod.getController(); 
 
  aboutToAppear(): void { 
    try { 
      let textConfig: inputMethod.TextConfig = { 
        inputAttribute: { 
          textInputType: 0, 
          enterKeyType: 1 
        } 
      }; 
      this.inputMethodController.attach(true, textConfig, (err: BusinessError) => { 
        if (err) { 
          console.error(`Failed to attach: ${JSON.stringify(err)}`); 
          return; 
        } 
        console.log('Succeeded in attaching the inputMethod.'); 
      }); 
    } catch (err) { 
      console.error(`Failed to attach: ${JSON.stringify(err)}`); 
    } 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Web({ src: 'https://test-b-fat.pingan.com.cn/ibank/member/example/index17.html', controller: this.controller }) 
          .javaScriptAccess(true) 
          .domStorageAccess(true) 
          .onControllerAttached(() => { 
            this.inputMethodController.showTextInput((err: BusinessError) => { 
              if (err) { 
                console.error(`Failed to showTextInput: ${JSON.stringify(err)}`); 
                return; 
              } 
              console.log('Succeeded in showing the inputMethod.'); 
            }); 
          }) 
      }.width('100%') 
    }.height('100%') 
  } 
}

html:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>输入框获焦</title> 
    <script type="text/javascript"> 
      function handleFocus() { 
        console.log("输入框已获焦"); 
      } 
    </script> 
  </head> 
  <body> 
    <input type="text" onfocus="handleFocus()" placeholder="点击我" /> 
  </body> 
</html>

实现效果:

分享
微博
QQ
微信
回复
2024-05-21 16:36:49
相关问题
HarmonyOS h5页面缩放问题
569浏览 • 0回复 待解决
HarmonyOS H5页面加载缓存机制
285浏览 • 1回复 待解决
如何使H5页面适配多设备?
771浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
227浏览 • 1回复 待解决
如何在HarmonyOS中调试h5页面
938浏览 • 1回复 待解决
HarmonyOS h5页面是否可以适配Harmony OS
529浏览 • 1回复 待解决