Преобразование сценария прототипа в jQuery

Question

У меня есть эта функция, которую я нашел в статье где-то, которая, кажется, смешивает прототип с jquery-скриптами, но я не хочу включать прототип, поскольку он ломает все остальное. Поэтому я хотел посмотреть, может ли кто-нибудь там помочь преобразовать это в jQuery для меня.

Функция должна обнаруживать, что поля автозаполнения браузера заполнены и соответственно присвоить класс соответствующим меткам.

$("label.placeholder + .input-text").each(function (type) { 
Event.observe(window, 'load', function() { 
    setTimeout(function(){ 
     if (!input.value.empty()) { 
      input.previous().addClassName('has-text'); 
     } 
    }, 200); 
}); 
}); 

Проблема в том, что я продолжаю получать ошибку Event.observe is not a function.

Любая помощь очень ценится!

Answer 1

Я думаю, что это может помочь:

$(function() { 
    setTimeout(function(){ 
    $("label.placeholder + .input-text").each(function() { 
     if ($(this).val()) $(this).prev().addClass('has-text'); 
    }); 
    }, 200); 
}); 

Answer 2

Если то, что вы делаете проверку кэшированных значений OnLoad, то вы можете попробовать это:

$(window).load(function(e){ 

setTimeout(function(t){ 
    $('label.placeholder + .input-text').each(function(index, element){ 
    if (!$(element).val()) 
    { 
     $(element).prev().addClass('has-text'); 
    } 
    }); 
}, 200); 

}); 

Он должен удалить чрезмерное количество вызовов setTimeout.

вы можете быть в состоянии изменить первую строку: jQuery(function($){, но я не уверен, если бы загружены авто заполненных форм после document.onready события или window.onload события. Вам просто нужно сыграть с ним, чтобы узнать.

Answer 3

Похоже, что я понял ... может быть, не лучший способ это сделать, но он работает! Вот мой новый код:

$("label.placeholder + .input-text").each(function (type) { 

    // Check if anything is filled in on page load 
    if($(this).val() !== '') { 
    $(this).prev("label.placeholder").addClass("has-text").removeClass("focus"); 
    } else { 
    $(this).prev("label.placeholder").removeClass("has-text").removeClass("focus"); 
    } 

    //Change the label style 
    $(this).focus(function() { 
    $(this).prev("label.placeholder").addClass("focus"); 
    }); 

    //Check if user has typed anything in the field 
    $(this).keyup(function() { 
    $(this).prev("label.placeholder").addClass("has-text").removeClass("focus"); 
    }); 

    // 
    $(this).blur(function() { 

    // Loops through all fields to see if the browser has auto-filled after the user inputted something 
    setTimeout(function(t){ 
     $('label.placeholder + .input-text').each(function(index, element){ 
     if($(element).val() !== '') { 
      $(this).prev("label.placeholder").addClass("has-text").removeClass("focus"); 
     } 
     }); 
    }, 200); 

    // If the field is left blank, set the label back to default 
    if($(this).val() === "") { 
     $(this).prev("label.placeholder").removeClass("has-text").removeClass("focus"); 
    } else { 
     $(this).prev("label.placeholder").addClass("has-text").removeClass("focus"); 
    } 
}); 

вопрос, я должен сделать проверку через все поля, чтобы увидеть, если иметь значение на $(this).blur или $(this).keyup?

Еще раз спасибо за помощь и предложения!