web-dev-qa-db-ja.com

JavaScriptを介して入力ボックスが入力されたときに、マテリアライズラベルを入力ボックスから移動させる

通常、 Materialize を使用すると、ユーザー入力がボックスを選択してテキストを入力するまで、テキスト入力ボックスのラベルが入力ボックス内に表示されます。ただし、ボックスの値がJavaScriptを介して入力される場合、ラベルは邪魔になりません。これはボックス内にとどまり、入力したテキストと重なります。 javascriptでもラベルの遷移をトリガーする方法があるので、これは起こりませんか？

csslabelsmaterialize
14
neurodynamic

より具体的には、Railsでターボリンクを有効にしてMaterializeを使用している場合、空でない値が事前に入力されているMaterializeフォームフィールドがページの読み込み時にアクティブにならないことがわかります。

次の方法が私のために働きました：

$(function() {
    M.updateTextFields();
});

クラス'active'を対応するラベルとプレフィックスアイコンの両方に追加します。

23
elquimista

ラベルの遷移動作は、ラベルの要素にactiveクラスを追加することによってトリガーされます。したがって、JavaScriptでフィールドに入力するだけでなく、そのクラスをラベル（$('label').addClass('active')など）に追加すると、ユーザーアクションで選択したときと同じように、ラベルはフィールドから遷移します。

15
neurodynamic

document.readyイベントは、ターボリンクが機能しているときに一度だけ発生するため、ターボリンクのロードイベントを利用する必要があります。

so高速に発生するため、アニメーションを表示したい場合は、小さなタイムアウトでラップしてください。

タイムアウト/可視アニメーションあり

document.addEventListener('turbolinks:load', () => {
    setTimeout(() => {
        M.updateTextFields();
    }, 100);
});

タイムアウトなし/アニメーション表示なし

document.addEventListener('turbolinks:load', () => {
    M.updateTextFields();
});

Rails 5 with Turbolinks、およびMaterialize CSS 1.0.

2
Steve Meisner

追加 class="active"into入力フィールドに関連付けられたlabelタグ。

1
Darryl Mendonez

古いバージョン（0.x）のMaterializecssを使用している場合は、次を使用します。

Materialize.updateTextFields();

の代わりに：

M.updateTextFields();
0
restlessera

ラベルを使用する場合は、次のものを使用します。

$("label[for='idTag']").addClass('active');
0
Eduardo Tolentino

ReactJSでソリューションを探している人のために：

  1. 入力の値プロパティをコンポーネントの状態のある値にリンクします。 （例：value = {this.state.name}）
  2. 行document.M.updateTextFields()をコンポーネントのcomponentDidMount() lifeCycleメソッドに追加します。

上記のソリューションは、フォームに事前入力する必要がある特定の値がある場合に役立ちます。 （例：更新詳細フォーム）

0
thewebjackal

JQueryでは$（ '＃yourInputText'）。change（）;を使用できます。

0
ferchoman09