it-swarm.dev

Giriş kutusu javascript ile doldurulduğunda, materyalize etiketlerin giriş kutusundan çıkarılmasını sağlayın

Normalde, Materyalleştir ile, bir kullanıcı girinceye ve içine metin girinceye kadar metin giriş kutularının etiketleri giriş kutularının içinde gösterilir. Bununla birlikte, bir kutunun değeri javascript ile doldurulduğunda, etiket yoldan çıkmaz. Kutuda kalır ve girilen metinle üst üste gelir. Javascript ile etiket geçişini de tetiklemenin bir yolu var mı?

13
neurodynamic

Daha spesifik olarak, eğer turbolinks etkinken Rails in Materialize kullanıyorsanız, boş olmayan değerlerle önceden doldurulmuş olan Materialize form alanlarının sayfa yükünde aktif olmadığını göreceksiniz.

Aşağıdaki yöntem benim için çalıştı:

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

Hem karşılık gelen etiketlere hem de önek simgelerine 'active' sınıfı ekleyecektir.

19
elquimista

Etiket geçiş davranışı, etiketin öğesine active sınıfı eklenerek tetiklenir. Bu nedenle, javascript'inizi, bu alanı alana doldurmanın yanı sıra etikete (ör. $('label').addClass('active')) eklemesini sağlarsanız, etiket, bir kullanıcı işlemi tarafından seçildiğinde olduğu gibi alanın dışına çıkar.

13
neurodynamic

document.ready olayı yalnızca turbolink çalışırken bir kez ateşlenir, bu nedenle bunun yerine turbolink yükleme olayına girmeniz gerekir.

Bu, so fast olur, animasyonu görmek istiyorsanız, küçük bir zaman aşımına sarın.

Zaman aşımı/görülebilir animasyonla

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

Zaman aşımı olmadan/görülebilir animasyon

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

Turbolinks ile 5 no'lu raylar ve CSS 1.0.0'ı maddeleştirin

1
Steve Meisner

Giriş alanıyla ilişkilendirilmiş label etiketine class="active" ekleyin.

1
Darryl Mendonez

Materializecss'in eski sürümünü (0.x) kullanıyorsanız, şunları kullanın:

Materialize.updateTextFields(); 

onun yerine:

M.updateTextFields();
0
restlessera

Eğer etiket kullanıyorsanız, kullanacaksınız:

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

JQuery ile $ ('# YourInputText') kullanabilirsiniz. Change ();

0
ferchoman09