为啥我的 Ionic 3 项目中没有占位符文本

Posted 2023-03-13

【中文标题】为啥我的 Ionic 3 项目中没有占位符文本

【英文标题】：Why no Placeholder text on my Ionic 3 project为什么我的 Ionic 3 项目中没有占位符文本

【发布时间】：2018-04-06 14:46:53

【问题描述】：

我在我的项目中看不到任何placeholder 文本。你能告诉我为什么吗？如果我创建一个新项目，那么它就可以工作。这是一个非常奇怪的问题。关于这种行为的任何线索？

 <ion-list>
    <ion-item>
      <ion-label color="primary">Inline Label</ion-label>
      <ion-input placeholder="Text Input"></ion-input>
    </ion-item>
 </ion-list>

我正在使用最新的离子。

@ionic/cli-utils  : 1.15.0
ionic (Ionic CLI) : 3.15.0

全局包：

cordova (Cordova CLI) : 7.0.1

本地包：

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1

系统：

Android SDK Tools : 25.2.5
Node              : v6.10.0
npm               : 3.10.10
OS                : Windows 8.1

环境变量：

ANDROID_HOME : C:\Program Files (x86)\Android\android-sdk

杂项：

backend : pro

在这里你可以看到它渲染正确。那么问题出在哪里？我也在设备上对此进行了测试。同样的恐怖:(

【问题讨论】：

尝试在输入中添加type 属性：<ion-input type="text" placeholder="Text Input"></ion-input>

看不到计算出来的样式，但它是否有可能以某种方式从父元素的可见部分移出？几年前，我在 ionic 的 ios 上遇到过这种情况，一些父类获得了巨大的利润或其他东西。在我产生检查样式的想法之前，它困扰了我 1 小时。

没有。同样的恐怖:(@David

那么您设置的其他样式可能会干扰您的输入元素，正如@DanteTheSmith 所说。使用 chrome 开发工具检查元素并尝试删除/添加 css 选择器以找出导致问题的原因。

是的，找到了问题。我已经在全球范围内给了$text-input-placeholder-color: rgba(255, 255, 255, 0.5);。这导致了这个问题。我想关闭这篇文章。您想将其发布为答案还是？ @大卫

【参考方案1】：

OP 的反馈

我在variables.scss 文件上设置了$text-input-placeholder-color: rgba(255, 255, 255, 0.5);。这就是问题所在。

大卫的反馈

很可能其他一些（全局的、更高级别的）样式正在使用placeholder 属性进行推断。尝试使用 chrome 开发工具检查输入元素，并一一删除/添加 css 选择器以找出导致问题的原因（特别检查颜色、边距、填充、不透明度）。