Question

我正在使用Angular Material 1.0.3和<input>元素已正确设置，但如果我单击一个来聚焦它们，它们的值是可见的。一旦它没有聚焦，我就看不到它的价值。

标记如下：

<md-input-container>
    <label>Some label</label>
    <input ng-model="model.someProperty">
</md-input-container>

在检查它是否是CSS问题后，我发现以下CSS选择器正在将color转变为transparent：

md-input-container:not(.md-input-has-value) input:not(:focus) {
     color: transparent;
}

显然，输入似乎没有.md-input-has-value CSS类。

目前，我无法弄清楚出了什么问题。

其他信息

就我而言，与Angular Material演示相反，控制器处于指令和UI路由器状态。

事实上，我可以确认我已经将index.html中的相同标记复制粘贴为<body>的直接子项，然后按预期工作。

也许它与这个公开问题有一些关系：Compiling material directives on the fly: md-input-has-value attribute not set #3017。

`<md-input-container>`有`md-input-has-value` CSS类

我还检查过<md-input-container>是否有md-input-has-value CSS类。

Answer 1

当您像这样嵌套md-input-container时，也可能发生此问题：

<md-input-container class="md-block">
    <md-input-container class="md-block">
        <label>Some label</label>
        <input ng-model="model.someProperty">
    </md-input-container>
</md-input-container>

我只需要删除这个额外的md-input-container并解决问题。

解释（由 Segev -CJ- Shmueli 提供）：

当你添加一个值时，它会将class =“md-input-has-value”添加到包装md-input-container。如果您的输入被另一个输入包裹一个，它不会接收该类和作为后续文本将变得透明。

Answer 2

Angular material version - v1.0.1-master-edfe2ad

刚刚订阅了帮助解决此问题的任何人。

转到angular-material.css文件并更改（对于我的第11,334行）

md-input-container:not(.md-input-has-value) input:not(:focus),
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
color: transparent; }

将黑色和中提琴固定颜色....

Answer 3

最后我做了一周我应该做的事情：在其他网络浏览器上尝试相同的应用。

Firefox中的代码完全相同，Internet Explorer 11和Edge按预期工作：它没有遇到我的问题中解释的问题。

这里的笑话是一个简单的代码片段并不能证明这个问题，因为使用这个简单的标记时，Chrome 47会在使用document.querySelectorAll查询选择器时返回0个节点。在我的实际标记中，它找到整个元素。

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("result").textContent = "elements found: " + document.querySelectorAll("md-input-container:not(.md-input-has-value) input:not(:focus)").length;
});

＆＃13;

<md-input-container class="md-input-has-value">
  <label>Some label</label>
  <input ng-model="model.someProperty">
</md-input-container>

<div id="result"></div>

＆＃13;

更新

我已将Chrome更新为48，问题已解决。毕竟，当元素非常嵌套时，它是:not选择器的特定于浏览器的问题。如果有人可以在Chrome的问题跟踪器中找到打开/关闭的问题，那么在我的回答中添加链接会很棒。

更新2

哎呀！现在一些<input>字段运行良好，其他字段仍然遇到问题。他们是指令内部的人。

在Firefox中，Explorer和Edge仍可正常运行。

Answer 4

我正在某些输入字段上工作，并且遇到了相同的问题。请检查您的代码，并确保未在另一个输入容器（如

）中使用输入容器

<md-input-container class="md-input-has-value">
   <label>Some label</label>
   <input ng-model="model.propertyName">
</md-input-container>

角度材料输入在未聚焦时未显示值

其他信息

`<md-input-container>`有`md-input-has-value` CSS类

4 个答案:

更新

更新2

角度材料输入在未聚焦时未显示值

其他信息

<md-input-container>有md-input-has-value CSS类

4 个答案:

更新

更新2

`<md-input-container>`有`md-input-has-value` CSS类