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

HarmonyOS

济南二狗子

2024-05-20 20:56:33

浏览

已于2024-5-21 16:56:30修改

回答 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%') 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.

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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

实现效果：

2024-05-21 16:36:49

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看