web组件打开百度出现双光标问题分析

[鸿蒙小橙娃]

1 关键字

web; 双光标;

2 问题描述

问题现象：3.1 release版本 web浏览器打开百度时，textInput输入框和地址输入栏都有光标闪烁

测试步骤：

1. 打开百度页面，先点击百度搜索框，出现输入法，当前光标出现在百度搜索栏
2. 再点击url 搜索栏TextInput, 当前光标出现在搜索栏，百度输入栏光标没消失，界面上出现两个光标

3 问题原因

3.1 正常机制

界面上只出现一个光标

3.2 异常机制

url输入栏和搜索栏都出现了光标

4 解决方案

修改web应用的百度浏览器的默认地址为手机版的地址，目前使用的是电脑版的地址。文件路径\Web\entry\src\main\ets\MainAbility\model\WebData.ets

export function initWebData(): Array<WebData> {
const homeWebs = [
{ img: $r('app.media.ohos'), title: 'OpenHarmony', url: 'gitee.com/openharmony' },
{ img: $r('app.media.gitee'), title: 'gitee', url: 'www.gitee.com' },
{ img: $r('app.media.baidu'), title: 'baidu', url: 'www.baidu.com' }
]
return homeWebs
}

将 { img: $r('app.media.baidu'), title: 'baidu', url: 'http://www.baidu.com%27/ }中的'http://www.baidu.xn--com%27%27m-3x2pt12t.baidu.com%27/
在搜索后刷出来的百度页面不会显示焦点

5 定位过程

1. 装3.2bate版本的镜像，装web包，按上述操作发现百度浏览器未出现双光标，并且百度排版与3.1release不一样。
2. 对比3.1release的web应用与3.2bate的web应用的百度地址，发现地址不一样。
3. 将3.1release的web应用的百度地址www.baidu.com替换成m.baidu.com测试发现只有一个光标。

6 知识分享

• web组件的应用手机版地址不做自动获焦操作