ie html5div.js,使用IE10和CSS Device Adaptation-js模仿html5 placeholder-jQuery：用方向键控制层的移动_169IT.COM...

html5原生支持placeholder，对于不支持的浏览器(ie)，可用js模拟实现。

js代码

1 (function(){

2 //判断是否支持placeholder

3 function isPlaceholer(){

4 var input = document.createElement('input');

5 return "placeholder" in input;

6 }

7 //不支持的代码

8 if(!isPlaceholer()){

9 //创建一个类

10 function Placeholder(obj){

11 this.input = obj;

12 this.label = document.createElement('label');

13 this.label.innerHTML = obj.getAttribute('placeholder');

14 this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:12px;';

15 if(obj.value != ''){

16 this.label.style.display = 'none';

17 }

18 this.init();

19 }

20 Placeholder.prototype = {

21 //取位置

22 getxy : function(obj){

23 var left, top;

24 if(document.documentElement.getBoundingClientRect){

25 var html = document.documentElement,

26 body = document.body,

27 pos = obj.getBoundingClientRect(),

28 st = html.scrollTop || body.scrollTop,

29 sl = html.scrollLeft || body.scrollLeft,

30 ct = html.clientTop || body.clientTop,

31 cl = html.clientLeft || body.clientLeft;

32 left = pos.left + sl - cl;

33 top = pos.top + st - ct;

34 }

35 else{

36 while(obj){

37 left += obj.offsetLeft;

38 top += obj.offsetTop;

39 obj = obj.offsetParent;

40 }

41 }

42 return{

43 left: left,

44 top : top

45 }

46 },

47 //取宽高

48 getwh : function(obj){

49 return {

50 w : obj.offsetWidth,

51 h : obj.offsetHeight

52 }

53 },

54 //添加宽高值方法

55 setStyles : function(obj,styles){

56 for(var p in styles){

57 obj.style[p] = styles[p]+'px';

58 }

59 },

60 init : function(){

61 var label = this.label,

62 input = this.input,

63 xy = this.getxy(input),

64 wh = this.getwh(input);

65 this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left, 'top':xy.top});

66 document.body.appendChild(label);

67 label.onclick = function(){

68 this.style.display = "none";

69 input.focus();

70 }

71 input.onfocus = function(){

72 label.style.display = "none";

73 };

74 input.onblur = function(){

75 if(this.value == ""){

76 label.style.display = "block";

77 }

78 };

79 }

80 }

81 var inpColl = document.getElementsByTagName('input'),

82 textColl = document.getElementsByTagName('textarea');

83 //html集合转化为数组

84 function toArray(coll){

85 for(var i = 0, a = [], len = coll.length; i < len; i++){

86 a[i] = coll[i];

87 }

88 return a;

89 }

90 var inpArr = toArray(inpColl),

91 textArr = toArray(textColl),

92 placeholderArr = inpArr.concat(textArr);

93 for (var i = 0; i < placeholderArr.length; i++){

94 if (placeholderArr[i].getAttribute('placeholder')){

95 new Placeholder(placeholderArr[i]);

96 }

97 }

98 }

99 })()

html代码：

1

2

3

4

5

css代码：

1 div,input,textarea{ margin:0; padding:0;}

2 div{width:400px; margin:100px auto 0;}

3 input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 solid; background-color:#fff; padding-left:2px;}

4 textarea{ height:60px; font-size:12px; resize:none;}

本文链接