MDL jquery: 标签将内容重叠到输入字段中

Question

我使用 Firefox 版本 40.0.3/Chrome 45.0.2454.85，我遇到以下问题：
如果我使用 [=41=，placeholder/label 与内容重叠].

Javascript:

$("#eventAddKurzLB").val("test");

HTML:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="eventAddKurzLB" />
    <label class="mdl-textfield__label" for="eventAddKurzLB">Kurzbezeichnung:</label>
    <span class="mdl-textfield__error">Es sind nur Zahlen, Buchstaben und Bindestriche erlaubt!</span>
</div>

示例：

实例：
https://jsfiddle.net/vutLb9ut/2/

Answer 1

如果要同时使用两者，则必须使用 <br/>。像这样..

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

<label class="mdl-textfield__label" for="eventAddKurzLB"> Kurzbezeichnung:</label> 
<span class="mdl-textfield__error">Es sind nur Zahlen, Buchstaben und Bindestriche erlaubt!</span>
<br/>

<input class="mdl-textfield__input" type="text" id="eventAddKurzLB" /></div>

检查 fiddle -> https://jsfiddle.net/vutLb9ut/3/

Answer 2

问题不在于 jQuery，而是组件不知道您所做的更改这一事实（对 HTML 元素的编程更改不会触发事件），所以它不知道它应该改变它的外观。您可以通过在框中手动输入来测试它；即使加载了 jQuery，它也应该可以正常工作。

您可以使用元素的 API 来更改文本，方法是：

$("#my-textfield").get(0).MaterialTextfield.change('test');

（其中 my-textfield 是外部 label 元素），前提是该元素已完成升级。另一种选择是像您一样直接执行更改，但会触发对元素的 "dirtiness" 检查：

$("#my-textfield").get(0).MaterialTextfield.checkDirty();

希望对您有所帮助！

MDL jquery: 标签将内容重叠到输入字段中

MDL jquery: label overlaps the content into a input field

html

javascript

jquery

material-design-lite