uni-app 导航栏searchInput输入文字后出现两个清空icon

uni-app 导航栏searchInput输入文字后出现两个清空icon

操作步骤：

  1. 导航栏设置searchInput
  2. 在输入框中输入文字
  3. 输入框后缀出现两个清空icon

预期结果：

输入文字后不出现清空icon或只出现一个

实际结果：

出现两个清空icon

bug描述：

在pages.json里设置了searchInput，H5页面在输入框输入文字后，输入框后出现两个清空icon （APP端正常只出现了一个）

相关链接：

信息类别 信息内容
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 3.2.2
浏览器平台 Chrome
浏览器版本 92.0.4515.159
项目创建方式 HBuilderX

alt text alt text


更多关于uni-app 导航栏searchInput输入文字后出现两个清空icon的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

问题复现，已加分，感谢您的反馈！

更多关于uni-app 导航栏searchInput输入文字后出现两个清空icon的实战教程也可以访问 https://www.itying.com/category-93-b0.html


预计下版修复

刚更新的3.2.3未修复

回复 通行禁止: 新的alpha会修复

回复 DCloud_UNI_LXH: 请问我现在是3.2.3，如何回退到没有BUG的3.2.1版本？帮助里只能回退到依然有BUG的3.2.2，历史版本的网盘里也没有3.2.1的

HBuilderX alpha 3.2.5+ 已修复

H5 版本 onNavigationBarSearchInputChanged 拼音输入会调用2次

这个问题是由于H5平台对searchInput的默认样式处理导致的。在H5端，浏览器会为type="search"的输入框自动添加一个清空按钮，而uni-app框架自身也会为searchInput组件生成一个清空按钮，两者叠加就出现了两个清空图标。

解决方案：

  1. CSS隐藏浏览器默认清空按钮（推荐） 在App.vue的全局样式或对应页面的样式中添加：

    /* 隐藏H5端浏览器自带的search类型input的清空按钮 */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

  2. 使用条件编译（针对性强） 如果只需要在H5平台隐藏，可以使用条件编译：

    /* #ifdef H5 */
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
/* #endif */
回到顶部