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

如果你正在做的是检查缓存值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 2

我认为这可能会有所帮助：

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

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上是否有值？

再次感谢您的帮助和建议！

将Prototype脚本转换为jquery

3 个答案: