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

Question

我使用的是Firefox 40.0.3 /铬45.0.2454.85,我有以下问题:
在placeholder/label重叠的内容,如果我使用jQuery.

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

希望这可以帮助!