jquery input placeholder支持兼容ie7,ie8

谁践踏了优雅 2022-07-14 14:55 327阅读 0赞
  1. <input type="text" placeholder="搜索产品名称"/>
  2. <input type="password" placeholder="密码"/>
  3. /*
  4. * jQuery placeholder, fix for IE6,7,8,9
  5. * @author byh
  6. */
  7. var JPlaceHolder = {
  8. //检测
  9. _check : function(){
  10. return 'placeholder' in document.createElement('input');
  11. },
  12. //初始化
  13. init : function(){
  14. if(!this._check()){
  15. this.fix();
  16. }
  17. },
  18. //修复
  19. fix : function(){
  20. jQuery(':input[placeholder]').each(function(index, element) {
  21. var self = $(this), txt = self.attr('placeholder');
  22. self.wrap($('<div></div>').css({position:'relative', zoom:'1', border:'none', background:'none', padding:'none', margin:'none'}));
  23. var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
  24. var holder = $('<span></span>').text(txt).css({position:'absolute', left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
  25. self.focusin(function(e) {
  26. holder.hide();
  27. }).focusout(function(e) {
  28. if(!self.val()){
  29. holder.show();
  30. }
  31. });
  32. holder.click(function(e) {
  33. holder.hide();
  34. self.focus();
  35. });
  36. });
  37. }
  38. };
  39. //执行
  40. jQuery(function(){
  41. JPlaceHolder.init();
  42. });

发表评论

表情:
评论列表 (有 0 条评论,327人围观)

还没有评论,来说两句吧...

相关阅读