uni-app ios15系统上 input输入框异常

uni-app ios15系统上 input输入框异常

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX类型 正式
HBuilderX版本 3.2.3
手机系统 iOS
手机版本号 iOS 14
手机厂商 苹果
手机机型 iPhone 12
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<input placeholder="请输入您的账号search" confirm-type="search" />  
<input placeholder="请输入您的账号" />

操作步骤：

<input placeholder="请输入您的账号search" confirm-type="search" />  
<input placeholder="请输入您的账号" />

预期结果：

<input placeholder="请输入您的账号search" confirm-type="search" />  
<input placeholder="请输入您的账号" />

实际结果：

<input placeholder="请输入您的账号search" confirm-type="search" />  
<input placeholder="请输入您的账号" />

bug描述：

iPhone 12中，在ios15.0版本中，ios15.0版本中，ios15.0版本中（上面只能选择到ios14）， input 组件设置confirm-type=“search” 会自动展示一个搜索图标，并导致placeholder样式错乱。


更多关于uni-app ios15系统上 input输入框异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

HBuilderX 3.2.9已修复，请升级

更多关于uni-app ios15系统上 input输入框异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


ok 谢谢

这是一个iOS 15系统下WebView的已知兼容性问题。当在iOS 15的WebView中，input元素的type="search"或设置了confirm-type="search"时，系统会自动注入一个搜索图标，这会破坏原有的布局和样式，导致placeholder显示异常。

解决方案：

  1. 全局CSS修复（推荐）： 在App.vue的全局样式中添加以下CSS，可以隐藏iOS自动添加的搜索图标并修复样式：
    /* 隐藏iOS 15+ 搜索框的默认图标 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}
/* 修复placeholder可能出现的样式问题 */
input::-webkit-input-placeholder {
    line-height: normal !important;
}
回到顶部