2

私は Firefox バージョン 40.0.3/Chrome 45.0.2454.85 を使用していますが、次の問題があります:
jQueryplaceholder/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/

4

2 に答える 2

9

問題は jQuery ではなく、コンポーネントが変更を認識していない (HTML 要素へのプログラムによる変更はイベントをトリガーしない) ため、外観を変更する必要があることを認識していないという事実です。これは、ボックスに手動で入力してテストできます。jQuery がロードされていても、正しく動作するはずです。

代わりに、次のようにして、要素の API を使用してテキストを変更できます。

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

my-textfield外側のlabel要素はどこにありますか)、要素がアップグレードされている場合。他のオプションは、変更を直接実行することですが、要素の「ダーティネス」チェックをトリガーします。

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

お役に立てれば!

于 2015-09-16T11:06:52.010 に答える
-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>

フィドルをチェック - > https://jsfiddle.net/vutLb9ut/3/

于 2015-09-15T08:22:09.757 に答える