[英]Angular Material input not showing value when not focused
我正在使用 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>直接子级相同的标记，然后它按预期工作。
也许它与这个未解决的问题有一些关系：即时编译材料指令：未设置 md-input-has-value 属性 #3017 。
<md-input-container>具有md-input-has-value CSS 类我还检查了<md-input-container>有md-input-has-value CSS 类。
当您像这样嵌套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 中。 如果您的输入被另一个它包裹，它将不会接收该类，并且作为子序列，文本将变得透明。
Angular 材质版本 - 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; }
颜色黑色和中提琴固定....
最后，我做了一周前应该做的事情：在其他 Web 浏览器上尝试相同的应用程序。
在 Firefox、Internet Explorer 11 和 Edge 中完全相同的代码按预期工作：它没有遇到我的问题中解释的问题。
这里的笑话是一个简单的片段并没有演示这个问题，因为使用这个简单的标记 Chrome 47 在使用document.querySelectorAll查询选择器时返回 0 个节点。 在我的实际标记中，它找到了整个元素。
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选择器问题。 如果有人可以在 Chrome 的问题跟踪器中找到一个打开/关闭的问题，那么在我的答案中添加一个链接会很棒。
啊！ 现在某些<input>字段运行良好，而其他字段仍在遇到此问题。 它们是指令内部的那些。
在 Firefox 中，资源管理器和 Edge 仍然可以正常工作。
我正在处理一些输入字段并面临同样的问题。 请检查您的代码并确保您没有在另一个输入容器中使用输入容器，例如
<md-input-container class="md-input-has-value">
<label>Some label</label>
<input ng-model="model.propertyName">
</md-input-container>
Material UI Input 的焦点和不焦点时无法更改边框颜色
[英]Unable to change border color when focused and not focused of Material UI Input
如何在聚焦时使用Angular将输入字段滚动/移动到屏幕顶部？
[英]How to scroll / move input field to top of screen with Angular when focused?
Angular Material“md-chips”指令如何在select上控制输入字段而不是芯片容器？
[英]Angular Material “md-chips” directive how to control that input field on select was focused not chip container?
移动浏览器+专注时删除输入字段值文本突出显示？
[英]Mobile browsers + remove input field value text highlighting when focused?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.