uni-app input confirm-type等于search时输入框自动出现放大镜 无属性可关闭
uni-app input confirm-type等于search时输入框自动出现放大镜 无属性可关闭
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 11.3.1 | HBuilderX |
示例代码：
uniapp input confirm-type 等于 search 的时候 输入框 会自动出现一个放大镜
操作步骤：
uniapp input confirm-type 等于 search 的时候 输入框 会自动出现一个放大镜
预期结果：
uniapp input confirm-type 等于 search 的时候 输入框 会自动出现一个放大镜
实际结果：
uniapp input confirm-type 等于 search 的时候 输入框 会自动出现一个放大镜
bug描述：
uniapp input confirm-type 等于 search 的时候 输入框 会自动出现一个放大镜
更多关于uni-app input confirm-type等于search时输入框自动出现放大镜 无属性可关闭的实战教程也可以访问 https://www.itying.com/category-93-b0.html
10 回复
windows 上的 Chrome 有没有这个情况？
更多关于uni-app input confirm-type等于search时输入框自动出现放大镜 无属性可关闭的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是 uni-app 在编译到不同平台时的原生差异表现。
当 confirm-type="search" 时，各平台处理方式不同：
-
微信小程序/支付宝小程序：会自动在输入框右侧显示搜索图标（放大镜），这是平台原生控件的默认行为，uni-app 层面没有提供关闭该图标的属性。
-
H5 平台：不会自动显示放大镜图标。
解决方案：
如果不需要这个放大镜图标，可以考虑以下替代方案：
方案一：使用普通确认类型+自定义样式
<template>
<view class="search-container">
<input
confirm-type="go"
:value="keyword"
@confirm="handleSearch"
placeholder="请输入关键词"
class="search-input"
/>
<text class="search-icon" @click="handleSearch">🔍</text>
</view>
</template>
<style>
.search-container {
position: relative;
display: flex;
align-items: center;
}
.search-input {
flex: 1;
padding-right: 40rpx;
}
.search-icon {
position: absolute;
right: 10rpx;
font-size: 32rpx;
}
</style>
方案二：条件编译处理不同平台
<template>
<!-- #ifdef H5 -->
<input confirm-type="search" />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
<input confirm-type="go" />
<!-- #endif -->
</template>
方案三：使用 uni-ui 的 SearchBar 组件
<template>
<uni-search-bar
@confirm="handleSearch"
@clear="handleClear"
placeholder="搜索"
/>
</template>