javascript - MDL jQuery : label overlaps the content into a input field

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();

希望这对您有所帮助!