Question

IE不支持输入元素的占位符。我正在尝试使用jquery解决方法

我想要的是页面加载字段值sld初始化。我能够在场焦点上做。例如。这工作

  // ThiS Works on focus, "Email" is shown in text box
$(function() {
  $("#login_email").focus(function()
  {
      if ($(this).val() == "")
      {
          $(this).val("Email");
      }
  });
});

  // I hoped that this will intialize on page load. But this does not work ???
  // This does not work

$(function() {
  $("#login_email").val("Email");
});

我该如何解决这个问题？

为什么选项2不工作但选项1工作？有什么区别??

Answer 1

我可以建议这种方法

<强>的Javascript

$(function() {
    $("#login_email").val($("#login_email").attr("placeholder"));

    $("#login_email").on("focus", function() {
      var elem = $(this);
      if (elem.val() == "") {
          elem.val(elem.attr("placeholder"));
      } else if(elem.val() == elem.attr("placeholder")) {
          elem.val("");
      }
    });

    $("#login_email").on("blur", function() {
      var elem = $(this);
      if (elem.val() == "") {
          elem.val(elem.attr("placeholder"));
      }
    });
});

<强> HTML

<input type="text" id="login_email" placeholder="Email">

这样，它更可重复使用有关详细信息，请参阅JsFiddle：http://jsfiddle.net/SUdbs/

Answer 2

$(".#login_email").val("Email")
    .focus(function(){
        if($(this).val() == "Email"){
            $(this).val("");
        }
    })
    .blur(function(){
        if($(this).val().length == 0){
            $(this).val("Email");
        }
    });

这将为您提供类似占位符的输入。我喜欢占位符在聚焦上消失而不是消失，但为了减少代码膨胀，这可能对你有好处。

Answer 3

我最终这样做了：

  $("#login_email, #login_password").blur(function() {
    var input = $(this);
    if (input.val() == '') {
      input.addClass("placeholder");
      input.val(input.attr("placeholder"));
    }
  })
  // This is needed at the time of page load. There is
  // potential race condition happening here.
  setTimeout(function() {
    $("#login_email, #login_password").each(function() {
      var input = $(this);
      if (input.val() == '') {
        input.addClass("placeholder");
        input.val(input.attr("placeholder"));
      }
    })
  }, 50);

使用jquery的IE占位符解决方法

3 个答案: