日常技巧总结

注：日常工作中有好多小的技巧，时间长了容易遗忘，现总结如下，以作备忘。

1、透明iframe：

首先在引入iframe时增加allowTransparency="true"的属性设置，然后将被引用的页面的body的background属性设置为transparent

2、流式布局中图片垂直居中对齐：

增加 align="absmiddle"的属性设置，另外图片一般需要增加border=0的属性设置以解决图片作为链接时存在蓝边的问题

3、定义手型鼠标样式时不要采用cursor:hand，因为FF不支持，最好采用cursor:pointer;

4、文本框只能输入数字：

在文本框中增加 onkeyup="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、去掉点击链接时的虚线：onfocus="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.onmousedown = function(ev) {
   var eSrc = window.event? window.event.srcElement : ev.target;
   /*if(eSrc&&(eSrc.onclick||eSrc.nodeName.toLowerCase()!='tr')){
    return;
   }*/
   caller.start(ev);return false;
  }
  o.onmousemove = 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.onmousemove);
  this.oldEvents.push(document.onmouseup);
  
  if(this.root.setCapture) {
   this.root.setCapture(false);
  }
  document.onmousemove = function(ev){caller.drag(ev);return false;};
  document.onmouseup  = 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.onmouseup   = this.oldEvents.pop();
  document.onmousemove  = 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;";
 }
}