Placeholder cross browsers

HTML5的placeholder属性无非只是一个补缺的功能。那些IE9-都要使用JS去模拟,网上也有不少插件,但是发现在IE中,这些版本都有一些问题。无意中到了一个JQ写的,没有写成插件,反正考虑到了这一点。

$(document).ready(function(){

// var supportPlaceholder = 'placeholder' in document.createElement('input');
if(!Modernizr.input.placeholder){ 
//这里不使用Modernizr可以使用原生写法
//if(!supportPlaceholder){
    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

});

我提到的缺点就是,IE中会把placeholder的值提交,所以表单提交就会出错。这里后面的一段function正是去了这个一个值。

我的博客: moc.recilooc.www =>'www.coolicer.com'.split('').reverse().join('') 

 

原文地址:https://www.cnblogs.com/coolicer/p/2780442.html