javascript - MDL jquery：标签将内容重叠到输入字段中

Question

我使用 Firefox 版本 40.0.3/Chrome 45.0.2454.85，我有以下问题：如果我使用 jQuery，内容重叠
。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

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

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

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

（my-textfield外部label元素在哪里），前提是元素已完成升级。另一种选择是直接执行更改，就像您正在做的那样，但会触发对元素的“脏污”检查：

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

希望这可以帮助！

Answer 2

如果您想同时使用两者，则必须使用<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>

检查小提琴-> https://jsfiddle.net/vutLb9ut/3/