博客

1. 
   
   1
   
   
   、透明iframe：
3. 首先在引入iframe时增加allowTransparency=
   
   
   “true”
   
   
   的属性设置，然后将被引用的页面的body的background属性设置为transparent
5. 
   
   2
   
   
   、流式布局中图片垂直居中对齐：
7. 增加 align=
   
   
   “absmiddle”
   
   
   的属性设置，另外图片一般需要增加border=
   
   
   0
   
   
   的属性设置以解决图片作为链接时存在蓝边的问题
9. 
   
   3
   
   
   、定义手型鼠标样式时不要采用cursor:hand，因为FF不支持，最好采用cursor:pointer;
11. 
    
    4
    
    
    、文本框只能输入数字：
13. 在文本框中增加 οnkeyup=
    
    
    “this.value = this.value.replace(/[^\d]/ig, ”);”
    
    
15. 
    
    5
    
    
    、页面执行a的js事件而导致播放器停止的问题：
17. 请教刘又大哥后得知，执行click here时页面地址发生了变化（猜测），从而导致播放器停止。解决的办法是click here或者click here
19. 
    
    6
    
    
    、用innerHTML方法将不完整的html代码设置到一个div中时破坏掉页面的显示
21. 典型的是今天央视博客的一篇文章无法出现评论，后来分析了代码发现用户的html代码里面多了一个。而ie对于残缺的标记会做自动补全处理，从而破坏了原来的页面结构。解决的办法可以是把内容在textarea里面显示，但让要相应的设置textarea的样式。随着innerHTML应用的越来越多，用户有更多的机会自己编辑html代码，直接放到div里面显示越来越不足，所以需要使用新的方法。使用textarea的方法是学习csdn的做法，不知道还有没有更好的方法。
23. 
    
    7
    
    
    、获取选区的文字或者html代码：document.selection.createRange() .text .htmlText
25. 
    
    8
    
    
    、
    
    
    //保存内容到剪切板
    
    
26. function saveText(title, content, other) {
27. 
    
    
    try
    
    
    
    {
28. var clip_data = clipboardData.getData(
    
    
    ‘text’
    
    
    );
29. 
    
    
    if
    
    
    
    (clip_data.indexOf(
    
    
    “#oLdDaTa&!!”
    
    
    ) != –
    
    
    1
    
    
    )
30. clipboardData.setData(
    
    
    ‘text’
    
    
    ,clip_data.substring(clip_data.indexOf(
    
    
    “#oLdDaTa&!!”
    
    
    )+
    
    
    11
    
    
    , clip_data.length));
31. var str =
    
    
    “#bBsTiTlE&!!”
    
    
    + title +
    
    
    “#bBsCoNtEnT&!!”
    
    
    + content +
    
    
    “#bBsOtHeR&!!”
    
    
    + other +
    
    
    “#oLdDaTa&!!”
    
    
    + clipboardData.getData(
    
    
    ‘text’
    
    
    );
32. clipboardData.setData(
    
    
    ‘text’
    
    
    ,str);
33. }
    
    
    
    catch
    
    
    
    (e){}
34. }
35. 
    
    //从剪切板取出
    
    
36. function resetText(str) {
37. 
    
    
    if
    
    
    
    (getIEVersonNumber() >=
    
    
    7
    
    
    ){
38. var autoSave = document.getElementById(
    
    
    “auto_save”
    
    
    );
39. autoSave.checked =
    
    
    “”
    
    
    ;
40. }
41. var tIndex = str.indexOf(
    
    
    “#bBsTiTlE&!!”
    
    
    );
42. 
    
    
    if
    
    
    
    (tIndex == –
    
    
    1
    
    
    )
43. 
    
    
    return
    
    
    
    ;
44. var cIndex = str.indexOf(
    
    
    “#bBsCoNtEnT&!!”
    
    
    );
45. var oIndex = str.indexOf(
    
    
    “#bBsOtHeR&!!”
    
    
    );
46. var oldIndex = str.indexOf(
    
    
    “#oLdDaTa&!!”
    
    
    );
47. var title = document.getElementById(
    
    
    “post_title”
    
    
    );
48. 
    
    
    if
    
    
    
    (typeof(title) ==
    
    
    “undefined”
    
    
    || title ==
    
    
    
    null
    
    
    
    )
49. 
    
    
    return
    
    
    
    ;
50. var content = document.PostForm[textName];
52. title.value = str.substring(
    
    
    12
    
    
    , cIndex);
53. content.value = removeFmt(str.substring(cIndex +
    
    
    14
    
    
    , oIndex));
54. str = str.substring(oIndex +
    
    
    12
    
    
    , oldIndex);
55. 
    
    
    try
    
    
    
    {
56. 
    
    
    if
    
    
    
    (str.substring(
    
    
    1
    
    
    ,
    
    
    2
    
    
    ) ==
    
    
    “1”
    
    
    ) {
57. document.getElementById(
    
    
    “post.original”
    
    
    ).checked =
    
    
    “checked”
    
    
    ;
58. }
59. }
    
    
    
    catch
    
    
    
    (e) {}
60. 
    
    
    if
    
    
    
    (str.substring(
    
    
    0
    
    
    ,
    
    
    1
    
    
    ) ==
    
    
    “1”
    
    
    ) {
61. document.PostForm[abname][
    
    
    0
    
    
    ].checked =
    
    
    “checked”
    
    
    ;
62. }
63. 
    
    
    if
    
    
    
    (str.substring(
    
    
    2
    
    
    ,
    
    
    3
    
    
    ) ==
    
    
    “1”
    
    
    ) {
64. document.PostForm[nttname][
    
    
    1
    
    
    ].checked =
    
    
    “checked”
    
    
    ;
65. }
67. }
69. 
    
    //id是textarea的id,value想要插入的内容
    
    
70. function insertIntoText(target, value, bolReplace){
71. var ta = target;
73. 
    
    
    if
    
    
    
    (document.selection) {
    
    
    //For IE
    
    
74. 
    
    
    if
    
    
    
    (ta.currPos){
75. 
    
    
    if
    
    
    
    (bolReplace){
76. ta.currPos.text=value;
77. }
78. 
    
    
    else
    
    
    
    {
79. ta.currPos.text+=value;
80. }
81. }
82. 
    
    
    else
    
    
    
    {
83. ta.value+=value;
84. }
85. }
86. 
    
    
    else
    
    
    
    {
    
    
    //For Firefox
    
    
87. var startPos = ta.selectionStart;
88. var endPos = ta.selectionEnd;
90. 
    
    
    if
    
    
    
    (bolReplace)
91. ta.value = ta.value.substring(
    
    
    0
    
    
    , startPos) + value + ta.value.substring(endPos, ta.value.length);
92. 
    
    
    else
    
    
    
93. ta.value = ta.value.substring(
    
    
    0
    
    
    , startPos) + value + ta.value.substring(startPos, ta.value.length);
94. }
95. }
98. 
    
    9
    
    
    、去掉点击链接时的虚线：οnfοcus=
    
    
    “this.blur();”
    
    
100. 
     
     10
     
     
     、拖动控件
102. function BwlDrag() {
104. 
     
     
     this
     
     
     
     .root    =
     
     
     
     null
     
     
     
     ;
105. 
     
     
     this
     
     
     
     .onDragStart  =
     
     
     
     null
     
     
     
     ;
106. 
     
     
     this
     
     
     
     .onDragEnd   =
     
     
     
     null
     
     
     
     ;
107. 
     
     
     this
     
     
     
     .onDrag   =
     
     
     
     null
     
     
     
     ;
108. 
     
     
     this
     
     
     
     .oldEvents  =
     
     
     
     new
     
     
     
     Array();
109. 
     
     //o is the part that drag on, and oRoot is the main object
     
     
110. 
     
     
     this
     
     
     
     .init = function(o, oRoot) {
111. 
     
     
     this
     
     
     
     .root = oRoot && oRoot !=
     
     
     
     null
     
     
     
     ? oRoot : o ;
113. 
     
     
     this
     
     
     
     .onDragStart  =
     
     
     
     new
     
     
     
     Function();
114. 
     
     
     this
     
     
     
     .onDragEnd   =
     
     
     
     new
     
     
     
     Function();
115. 
     
     
     this
     
     
     
     .onDrag   =
     
     
     
     new
     
     
     
     Function();
116. var caller    =
     
     
     
     this
     
     
     
     ;
117. 
     
     
     this
     
     
     
     .root.style.cssText  =
     
     
     “background:#fff000;position:relative;left:0px;top:0px;z-index:100;”
     
     
     ;
118. o.
119. var eSrc = window.event? window.event.srcElement : ev.target;
120. 
     
     /*if(eSrc&&(eSrc.|eSrc.nodeName.toLowerCase()!=’tr’)){
     
     
121. 
     
     return;
     
     
122. 
     
     }*/
     
     
123. caller.start(ev);
     
     
     
     return
     
     
     
     
     
     
     false
     
     
     
     ;
124. }
125. o.onmousemove =
     
     
     
     null
     
     
     
     ;
126. }
128. 
     
     
     this
     
     
     
     .start = function(ev) {
129. ev=(window.event)?window.event:ev;
130. var y = parseInt(
     
     
     
     this
     
     
     
     .root.style.top);
131. var x = parseInt(
     
     
     
     this
     
     
     
     .root.style.left);
133. 
     
     
     this
     
     
     
     .onDragStart(x, y);
134. 
     
     
     this
     
     
     
     .lastMouseX = ev.clientX;
135. 
     
     
     this
     
     
     
     .lastMouseY = ev.clientY;
137. var caller    =
     
     
     
     this
     
     
     
     ;
138. 
     
     
     this
     
     
     
     .oldEvents.push(document.
139. 
     
     
     this
     
     
     
     .oldEvents.push(document.
141. 
     
     
     if
     
     
     
     (
     
     
     
     this
     
     
     
     .root.setCapture) {
142. 
     
     
     this
     
     
     
     .root.setCapture(
     
     
     
     false
     
     
     
     );
143. }
144. document.onmousemove = function(ev){caller.drag(ev);
     
     
     
     return
     
     
     
     
     
     
     false
     
     
     
     ;};
145. document.onmouseup  = function(ev){caller.end(ev);
     
     
     
     return
     
     
     
     
     
     
     false
     
     
     
     ;};
146. 
     
     
     return
     
     
     
     
     
     
     false
     
     
     
     ;
147. }
149. 
     
     
     this
     
     
     
     .drag = function(ev) {
150. ev=(window.event)?window.event:ev;
151. var ey   =  ev.clientY;
152. var ex   =  ev.clientX;
153. var y    =  parseInt(
     
     
     
     this
     
     
     
     .root.style.top);
154. var x    =  parseInt(
     
     
     
     this
     
     
     
     .root.style.left);
155. var nx    = x + ex –
     
     
     
     this
     
     
     
     .lastMouseX;
156. var ny   = y + ey –
     
     
     
     this
     
     
     
     .lastMouseY;
158. 
     
     
     this
     
     
     
     .root.style.left =  nx +
     
     
     “px”
     
     
     ;
159. 
     
     
     this
     
     
     
     .root.style.top  =  ny +
     
     
     “px”
     
     
     ;
160. 
     
     //this.root.style.cssText  =  “background:#fff000;position:relative;left:” + nx + “px;top:” + ny + “px;z-index:100;”;
     
     
161. 
     
     
     this
     
     
     
     .lastMouseX =  ex;
162. 
     
     
     this
     
     
     
     .lastMouseY =  ey;
164. 
     
     
     this
     
     
     
     .onDrag(nx, ny);
165. }
167. 
     
     
     this
     
     
     
     .end = function(ev) {
168. document.onmouseup   =
     
     
     
     this
     
     
     
     .oldEvents.pop();
169. document.onmousemove  =
     
     
     
     this
     
     
     
     .oldEvents.pop();
170. 
     
     
     if
     
     
     
     (
     
     
     
     this
     
     
     
     .root.releaseCapture){
171. 
     
     
     this
     
     
     
     .root.releaseCapture();
172. }
173. 
     
     
     this
     
     
     
     .onDragEnd(parseInt(
     
     
     
     this
     
     
     
     .root.style.left),parseInt(
     
     
     
     this
     
     
     
     .root.style.top));
174. 
     
     
     this
     
     
     
     .root.style.cssText  =
     
     
     “background:#fff000;position:relative;left:”
     
     
     +
     
     
     
     this
     
     
     
     .root.style.left +
     
     
     “px;top:”
     
     
     +
     
     
     
     this
     
     
     
     .root.style.top +
     
     
     “px;z-index:100;”
     
     
     ;
175. }
176. }

注：日常工作中有好多小的技巧，时间长了容易遗忘，现总结如下，以作备忘。
1、透明iframe：
首先在引入iframe时增加allowTransparency="true"的属性设置，然后将被引用的页面的body的background属性设置为transparent
2、流式布局中图片垂直居中对齐：
增加 align="absmiddle"的属性设置，另外图片一般需要增加border=0的属性设置以解决图片作为链接时存在蓝边的问题
3、定义手型鼠标样式时不要采用cursor:hand，因为FF不支持，最好采用cursor:pointer;
4、文本框只能输入数字：
在文本框中增加 οnkeyup="this.value = this.value.replace(/[^\d]/ig, '');" 
5、页面执行a的js事件而导致播放器停止的问题：
请教刘又大哥后得知，执行click here时页面地址发生了变化（猜测），从而导致播放器停止。解决的办法是click here或者click here
6、用innerHTML方法将不完整的html代码设置到一个div中时破坏掉页面的显示
典型的是今天央视博客的一篇文章无法出现评论，后来分析了代码发现用户的html代码里面多了一个。而ie对于残缺的标记会做自动补全处理，从而破坏了原来的页面结构。解决的办法可以是把内容在textarea里面显示，但让要相应的设置textarea的样式。随着innerHTML应用的越来越多，用户有更多的机会自己编辑html代码，直接放到div里面显示越来越不足，所以需要使用新的方法。使用textarea的方法是学习csdn的做法，不知道还有没有更好的方法。
7、获取选区的文字或者html代码：document.selection.createRange() .text .htmlText
8、 //保存内容到剪切板
function saveText(title, content, other) {
try{
var clip_data = clipboardData.getData('text');
if(clip_data.indexOf("#oLdDaTa&!!") != -1)
clipboardData.setData('text',clip_data.substring(clip_data.indexOf("#oLdDaTa&!!")+ 11, clip_data.length));
var str = "#bBsTiTlE&!!" + title + "#bBsCoNtEnT&!!" + content + "#bBsOtHeR&!!" + other + "#oLdDaTa&!!" + clipboardData.getData('text');
clipboardData.setData('text',str);
}catch(e){}
}
//从剪切板取出
function resetText(str) {
if(getIEVersonNumber() >= 7){
var autoSave = document.getElementById("auto_save");
autoSave.checked = "";
}
var tIndex = str.indexOf("#bBsTiTlE&!!");
if(tIndex == -1)
return;
var cIndex = str.indexOf("#bBsCoNtEnT&!!");
var oIndex = str.indexOf("#bBsOtHeR&!!");
var oldIndex = str.indexOf("#oLdDaTa&!!");
var title = document.getElementById("post_title");
if(typeof(title) == "undefined" || title == null)
return;
var content = document.PostForm[textName];
title.value = str.substring(12, cIndex);
content.value = removeFmt(str.substring(cIndex + 14, oIndex));
str = str.substring(oIndex + 12, oldIndex);
try {
if(str.substring(1, 2) == "1") {
document.getElementById("post.original").checked = "checked";
}
}catch (e) {}
if(str.substring(0, 1) == "1") {
document.PostForm[abname][0].checked = "checked";
} 
if(str.substring(2, 3) == "1") {
document.PostForm[nttname][1].checked = "checked";
}
}
//id是textarea的id,value想要插入的内容
function insertIntoText(target, value, bolReplace){
var ta = target;
if (document.selection) { //For IE
if (ta.currPos){
if(bolReplace){
ta.currPos.text=value;
}
else{
ta.currPos.text+=value;
}
}
else{
ta.value+=value;
}
}
else{ //For Firefox
var startPos = ta.selectionStart;
var endPos = ta.selectionEnd;
if(bolReplace)
ta.value = ta.value.substring(0, startPos) + value + ta.value.substring(endPos, ta.value.length);
else
ta.value = ta.value.substring(0, startPos) + value + ta.value.substring(startPos, ta.value.length);
}
}
9、去掉点击链接时的虚线：οnfοcus="this.blur();"
10、拖动控件
function BwlDrag() {
 
 this.root    =  null;
 this.onDragStart  =  null;
 this.onDragEnd   =  null;
 this.onDrag   =  null;
 this.oldEvents  =  new Array();
 //o is the part that drag on, and oRoot is the main object
 this.init = function(o, oRoot) {
  this.root = oRoot && oRoot != null ? oRoot : o ;
  
  this.onDragStart  =  new Function();
  this.onDragEnd   =  new Function();
  this.onDrag   =  new Function();
  var caller    =  this;
  this.root.style.cssText  =  "background:#fff000;position:relative;left:0px;top:0px;z-index:100;";
  o. = function(ev) {
   var eSrc = window.event? window.event.srcElement : ev.target;
   /*if(eSrc&&(eSrc.|eSrc.nodeName.toLowerCase()!='tr')){
    return;
   }*/
   caller.start(ev);return false;
  }
  o. = null;
 }
 this.start = function(ev) {
  ev=(window.event)?window.event:ev;
  var y = parseInt(this.root.style.top);
  var x = parseInt(this.root.style.left);
  this.onDragStart(x, y);
  this.lastMouseX = ev.clientX;
  this.lastMouseY = ev.clientY;
  
  var caller    =  this;
  this.oldEvents.push(document.  this.oldEvents.push(document.  
  if(this.root.setCapture) {
   this.root.setCapture(false);
  }
  document. = function(ev){caller.drag(ev);return false;};
  document.  = function(ev){caller.end(ev);return false;};
  return false;  
 }
 
 this.drag = function(ev) {
  ev=(window.event)?window.event:ev;
  var ey   =  ev.clientY;
  var ex   =  ev.clientX;
  var y    =  parseInt(this.root.style.top);
  var x    =  parseInt(this.root.style.left);
  var nx    = x + ex - this.lastMouseX;
  var ny   = y + ey - this.lastMouseY;
  
  this.root.style.left =  nx + "px";
  this.root.style.top  =  ny + "px";
  //this.root.style.cssText  =  "background:#fff000;position:relative;left:" + nx + "px;top:" + ny + "px;z-index:100;";
  this.lastMouseX =  ex;
  this.lastMouseY =  ey;  
  
  this.onDrag(nx, ny);
 }
 
 this.end = function(ev) {
  document.   = this.oldEvents.pop();
  document.  = this.oldEvents.pop();
  if(this.root.releaseCapture){
   this.root.releaseCapture();
  }
  this.onDragEnd(parseInt(this.root.style.left),parseInt(this.root.style.top));
  this.root.style.cssText  =  "background:#fff000;position:relative;left:" + this.root.style.left + "px;top:" + this.root.style.top + "px;z-index:100;";
 }
}