鸿蒙开发者社区

WOT技术大会

AIGC创新中国行

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 2024年软考 PMP项目管理软考资讯

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO题库小程序

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

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>

实现效果：

回复

2024-05-21 16:36:49

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

发布

相关问题

点击输入框时会拉起软键盘，如何实现点击Button时软键盘关闭

719浏览 • 1回复待解决

如何控制TextInput软键盘的拉起与收起(获焦失焦)

159浏览 • 1回复待解决

如何在HarmonyOS中调试h5页面

321浏览 • 1回复待解决

软键盘弹出时，固定导航栏不滚动以及软键盘区域不遮盖组件（输入框）

430浏览 • 1回复待解决

升级API11后h5页面字体变小了

545浏览 • 1回复待解决

如何设置Web组件加载的H5页面禁用手势缩放

703浏览 • 1回复待解决

在Web组件的H5页面中，如何使用a标签实现打开各种页面

616浏览 • 1回复待解决

webview容器加载h5页面之获取剪贴板的数据

445浏览 • 1回复待解决

输入框拉起键盘时，如何将底部布局弹起到键盘顶部

585浏览 • 1回复待解决

点击文本输入框，如何屏蔽系统默认键盘弹起行为

651浏览 • 1回复待解决

H5页面如何与ArkTS交互

1307浏览 • 1回复待解决

mate60pro上h5页面切换过渡会有页面发大过程

467浏览 • 1回复待解决

Web加载的H5页面跳转后，如何避免原有页面注册的资源被清空

604浏览 • 1回复待解决

键盘遮挡问题，文本输入框如何才能自动抬起避让弹出的键盘

373浏览 • 1回复待解决

ets textInput 组件如何设置默认获焦切不弹软键盘？

1702浏览 • 1回复待解决

鸿蒙软键盘弹出后，页面底部的按钮

2802浏览 • 0回复待解决

如何控制软键盘弹出对页面的遮挡？

1381浏览 • 1回复待解决

自定义密码键盘，点击输入框时如何屏蔽系统输入键盘

534浏览 • 1回复待解决

TextInput组件获取焦点之后怎么自动弹窗软键盘，还得点击一下才会弹出软键盘？

684浏览 • 1回复待解决

如何解决Web页面输入框拉起键盘后，页面头部被截断的问题

700浏览 • 1回复待解决

响应式布局是只适用于原生页面，还是H5页也支持

549浏览 • 1回复待解决

TextInput输入框如何失去焦点？输入框获取焦点后，点击页面上其他任意地方无法失去焦点，焦点在输入框中

596浏览 • 1回复待解决

鸿蒙手机如何隐藏软键盘和弹出软键盘？

13350浏览 • 1回复待解决

软键盘弹出时，页面的自适应

398浏览 • 1回复待解决

横屏模式，键盘弹起遮挡输入内容有最佳解决方案吗，是否有自动弹起页面之类的设置

345浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

鸿蒙输入框被软键盘遮挡的正确解决办法 3回复

输入框被软键盘遮挡的解决办法（Ability、Dialog都可以） 5回复

H5页面调起第三方App 0回复

HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 1回复

隐藏软键盘（隐藏输入法）的实现方法 7回复

Copyright © 2005-2024 51CTO.COM 京ICP证060544版权所有未经许可请勿转载