uni-app 【报Bug】NUVE 页面 uni-easyinput 的 placeholderStyle 属性在 ios 不起作用，安卓可以

uni-app 【报Bug】NUVE 页面 uni-easyinput 的 placeholderStyle 属性在 ios 不起作用，安卓可以

项目属性 信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 Windows 10 企业版
HBuilderX类型 正式
HBuilderX版本 3.3.5
手机系统 iOS
手机系统版本 iOS 14
手机厂商 苹果
手机机型 iPhoneXR
页面类型 nvue
Vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<uni-easyinput :inputBorder="false" :placeholderStyle="inputPlaceholderStyle" type="text"  
    v-model="loginData.username" placeholder="请输入用户名" />  

data() {  
  return {  
       inputPlaceholderStyle: "color: #547fea"  
  }  
}

操作步骤：

<uni-easyinput :inputBorder="false" :placeholderStyle="inputPlaceholderStyle" type="text"  
    v-model="loginData.username" placeholder="请输入用户名" />  

data() {  
  return {  
       inputPlaceholderStyle: "color: #547fea"  
  }  
}

预期结果：

  • 用 placeholderStyle 属性 改变 input placeholder 颜色；

实际结果：

  • 安卓可以改变。iOS 不能改变

bug描述：

nvue 页面 uni-easyinput 的 placeholderStyle 在 iOS 端不起作用。测试机型 iPhoneXR 系统 14.5.1；安卓的可以；


更多关于uni-app 【报Bug】NUVE 页面 uni-easyinput 的 placeholderStyle 属性在 ios 不起作用，安卓可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

查看相关问题：https://ask.dcloud.net.cn/question/125982

更多关于uni-app 【报Bug】NUVE 页面 uni-easyinput 的 placeholderStyle 属性在 ios 不起作用，安卓可以的实战教程也可以访问 https://www.itying.com/category-93-b0.html


https://ask.dcloud.net.cn/question/134764 这个里说 3.3.0+已经修复了。 但是还没有的

我验证 nvue ios15 android11 styles{color:}失效
<template>
<view>
<uni-easyinput v-model=“value” :styles=“styles” :placeholderStyle=“placeholderStyle” placeholder=“请输入内容”
@input=“input”></uni-easyinput>
</view>
</template>

<script> export default { data() { return { value: '', password: '', placeholderStyle: "color:#2979FF;font-size:14px", styles: { color: '#fc3a4b',//失效 borderColor: '#2979FF' } } }, onLoad() {}, onReady() {}, methods: { input(e) { console.log('输入内容：', e); }, iconClick(type) { uni.showToast({ title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`, icon: 'none' }) } } } </script> <style lang="scss"> </style>

尝试使用 原生 input 设置 placeholderStyle 看是否有相同的问题

一样的

在 nvue 页面中，uni-easyinput 组件的 placeholderStyle 属性在 iOS 端失效，这通常是由于平台差异导致的渲染问题。nvue 使用原生渲染，iOS 和 Android 的原生组件对样式属性的支持可能存在不一致。

原因分析：

  1. nvue 中的 uni-easyinput 在 iOS 端可能依赖原生 UITextField 的 attributedPlaceholder 来实现 placeholderStyle，但属性映射可能未完全适配。
  2. iOS 原生组件对 placeholder 样式的支持方式与 Android 不同，导致部分 CSS 属性（如 color）无法生效。

解决方案：

  1. 临时方案：使用 placeholder-class 替代 placeholderStyle，通过定义 CSS 类来设置样式。示例：
    <uni-easyinput 
    :inputBorder="false" 
    placeholder-class="custom-placeholder"
    type="text"  
    v-model="loginData.username" 
    placeholder="请输入用户名" 
/>
    在 style 中定义：
    .custom-placeholder {
    color: #547fea;
}
回到顶部