Angular Material 输入未聚焦时不显示值

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 class.

目前，我不知道出了什么问题。

附加信息

在我的例子中，与 Angular Material 演示相反，控制器处于指令和 UI 路由器状态。

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

可能跟这个open issue有关系：Compiling material directives on the fly: md-input-has-value attribute not set #3017.

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

我还检查过 <md-input-container> 有 md-input-has-value CSS class.

Answer 1

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

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

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

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

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

<div id="result"></div>

更新

我已经将Chrome更新为48，问题已经解决。毕竟，当元素非常嵌套时，:not 选择器会出现 browser-specific 问题。如果有人可以在 Chrome 的问题跟踪器中找到 open/closed 问题，那么最好在我的回答中添加 link。

更新 2

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

在 Firefox 中，Explorer 和 Edge 仍然可以正常工作。

Answer 2

Angular material 版本 - 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

当您像这样嵌套 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 给出）：

When you add a value it adds class="md-input-has-value" to the wrapping md-input-container. If your input is wrapped by yet another one it, it will not receive that class and as a subsequence the text will become transparent.

Answer 4

我在处理一些输入字段时遇到了同样的问题。请检查您的代码并确保您没有在另一个输入容器内使用输入容器，例如

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

Angular Material 输入未聚焦时不显示值

Angular Material input not showing value when not focused

javascript

google-chrome

angularjs

material-design