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元素的编程更改不会触发事件），因此它不会＃＆＃ 39;知道它应该改变它的外观。你可以通过手动输入框来测试这个;这应该可以正常工作，即使加载了jQuery。

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

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

（其中my-textfield是外部label元素），前提是元素已完成升级。另一个选择是直接执行更改，就像你正在做的那样，但会触发一个＆＃34;肮脏的＆＃34;检查元素：

$("#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>

检查小提琴 - ＆gt; https://jsfiddle.net/vutLb9ut/3/

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

2 个答案: