Make materialize labels move out of input box when input box is filled via javascript

Question

Normally, with Materialize, the labels for text input boxes show up inside the input boxes until a user enter selects the box and enters text in it. However, when a box's value is filled via javascript, the label does not move out of the way. It stays in the box and overlaps with the text entered. Is there a way to trigger the label transition with javascript as well, so this doesn't happen?

score 32 · Accepted Answer · edited May 21 '19 at 02:06

32

More specifically, if you are using Materialize in Rails with turbolinks enabled, you will find that Materialize form fields which are prefilled with non-empty values are not active on page load.

The following method worked for me:

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

It will add class 'active' to both corresponding labels and prefix icons.

edited May 21 '19 at 02:06

NewbornCodeMonkey

198
1
13

answered Feb 25 '16 at 08:04

elquimista

2,181
2
23
32

3

Materialize no longer works, you can replace it with `M.updateTextFields();` – gegobyte Dec 02 '18 at 08:24
If you don't use jquery: document.addEventListener("DOMContentLoaded", function () { // @ts-ignore M.updateTextFields(); }); – Pascal Ganaye Oct 05 '20 at 19:34

score 16 · Answer 2 · answered Aug 19 '15 at 16:41

The label transition behavior is triggered by adding the active class to the label's element. Thus, if you make your javascript add that class to the label (e.g. $('label').addClass('active')) in addition to filling in the field, the label will transition out of the field just as it would when selected by a user action.

score 3 · Answer 3 · edited Aug 20 '19 at 19:10

3

If you use labels, you will use:

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

edited Aug 20 '19 at 19:10

jrswgtr

2,287
8
23
49

answered Aug 20 '19 at 18:13

Eduardo Tolentino

1,470
1
12
8

Steve Meisner · Answer 4 · 2019-01-26T02:33:12.093

The document.ready event only fire once when turbolinks is working, so instead you need to tap into the turbolinks load event.

It happens so fast that if you want to see the animation, wrap it in a tiny timeout.

With timeout/visible animation

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

Without timeout/visible animation

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

Rails 5 with Turbolinks, and Materialize CSS 1.0.0

score 1 · Answer 5 · answered May 31 '19 at 19:37

1

Add class="active"into the label tag associated with the input field.

answered May 31 '19 at 19:37

Darryl Mendonez

1,081
1
15
27

score 0 · Answer 6 · answered Feb 12 '16 at 20:01

0

With JQuery you can use $('#yourInputText').change();

answered Feb 12 '16 at 20:01

ferchoman09

62
1
12

1

you have to be more explicit about your answer for the sake of beginners. – elquimista Nov 21 '16 at 08:14
Only yout need is a single line. $('input').change() or Materialize.updateTextFields(). It's all. – ferchoman09 Dec 06 '16 at 14:51

score 0 · Answer 7 · edited Jul 23 '19 at 03:07

0

If you are using older version (0.x) of Materializecss, use:

Materialize.updateTextFields();

instead of:

M.updateTextFields();

edited Jul 23 '19 at 03:07

Obsidian

3,719
8
17
30

answered Jul 22 '19 at 23:55

restlessera

1

score 0 · Answer 8 · answered Nov 05 '19 at 11:15

For anyone looking for solution in ReactJS:

link the value property of the input to some value in your Component's state. (Eg: value={this.state.name})
Add the line document.M.updateTextFields() to the componentDidMount() lifeCycle method of your Component.

The above solution helps when there are certain values which need to be prefilled into a Form. (Eg: Update Details Form)

Make materialize labels move out of input box when input box is filled via javascript

8 Answers8

Linked