uni-app IOS 15 搜索类型输入框自带图标问题

uni-app IOS 15 搜索类型输入框自带图标问题

产品分类

uniapp/App

示例代码：

<input v-model="form.contact_name"
placeholder="请输入联系人"
slot="right"
input-align="right"
confirm-type="search"/>

操作步骤：

<input v-model="form.contact_name"
placeholder="请输入联系人"
slot="right"
input-align="right"
confirm-type="search"/>

预期结果：

<input v-model="form.contact_name"
placeholder="请输入联系人"
slot="right"
input-align="right"
confirm-type="search"/>

实际结果：

<input v-model="form.contact_name"
placeholder="请输入联系人"
slot="right"
input-align="right"
confirm-type="search"/>

更多关于uni-app IOS 15 搜索类型输入框自带图标问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

问题确认，已加分，后续修复
临时解决方案：
app.vue style 内增加如下样式
[type=“search”]::-webkit-search-decoration {
display: none;
}

更多关于uni-app IOS 15 搜索类型输入框自带图标问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX alpha 3.2.8 已修复

3.2.16.20211122 仍有问题。uvew 1

confirm-type=“search” 的时候 就会出现 怎么解

HBuildX已经更新为3.2.9，对应iOS的基座包都已经替换掉了，但是打包处理来的在iOS15上显示还是有这个问题，请问是哪里还有问题吗？有少更改或者遗漏的操作吗？

3.2.15 也有。 老bug反复出现不应该啊

啊 升级上去 就会有这个问题啊？

你们是 CLI 创建的项目吗？如果是的话升级方式见文档

在 iOS 15 中，系统会自动为 confirm-type="search" 的输入框添加一个搜索图标。这是 iOS 15 的默认行为，属于系统级样式，并非 uni-app 的 bug。

如果你需要移除这个图标，可以通过 CSS 进行自定义样式覆盖。在 App 平台的 vue 页面或 nvue 页面中，添加以下样式：

/* 在 vue 页面中 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* 在 nvue 页面中，需要使用条件编译 */
/* #ifdef APP-NVUE */
input {
  placeholder-color: #999;
}
/* #endif */
回到顶部