错误与技巧笔记

编程的时候，往往最可怕的，都是那些不起眼的小错误。

（1）button的类型问题

往往我们用了button标签就认为它是个按钮了，但它的type默认并不是button，在firefox和chrome下，button的type的缺省值为submit，详细见这里：http://blog.moocss.com/code-snippets/html-css-code-snippets/1408.html

代码：

1 <form action="http://www.baidu.com">
2     <button>button</button>
3 </form>

以上代码，点击button页面会跳转到百度首页，正确的代码应该如下（显式地申明button的类型）：

1 <form action="http://www.baidu.com">
2     <button type="button">button</button>
3 </form>

（2）让DIV自适应子元素内容

如果子元素没有任何停靠，父元素不要设置高度就可以了。

例如：

 1 <html>
 2 <head>
 3     <title></title>
 4 <style type="text/css">
 5 .main {
 6     background-color: #ddd;
 7     width: 80%;
 8     margin: auto;
 9 }
10 </style>
11 </head>
12 <body>
13 <div class="main">
14     <div>
15         <img src="tmp.jpg">
16     </div>
17     <p>content</p>
18     <p>content</p>
19     <p>content</p>
20 </div>
21 </body>
22 </html>

当然更多的情况没这么理想。

解决方法，这个方法的可贵之处在于不管父容器是否悬浮都能起作用，如果父容器已经悬浮，则可以去掉overflow和height属性

 1 <html>
 2  <head>
 3      <title></title>
 4  <style type="text/css">
 5  .main {
 6      background-color: #ddd;
 7      width: 80%;
 8      /*float: left;*/
 9      margin: auto;
10      overflow: hidden;
11  }
12  .avatar {
13      float: left;
14  }
15  .content {
16      float: left;
17  }
18  </style>
19  </head>
20  <body>
21  <div class="main">
22      <div class="avatar">
23          <img src="org.jpg">
24      </div>
25      <div class="content">
26          <p>content</p>
27          <p>content</p>
28          <p>content</p>
29      </div>
30  </div>
31  </body>
32  </html>

其他方法可见地址：http://news.2ky.cn/14/3110.htm

一下为引用内容，防止地址失效：

Div即父容器不根据内容自适应高度，我们看下面的代码：
以下是代码片段：
<div id="main"> 
<div id="content"></div> 
</div>当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。

　　我们可以通过三种方法来解决这个问题。 
一，增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 
以下是代码片段：
<div id="main"> 
<div id="content"></div> 
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> 
</div>
二，增加一个容器，在代码中存在，但在视觉中不可见。 
以下是代码片段：
<div id="main"> 
<div id="content"></div> 
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div> 
</div> 
三，增加一个BR并设置样式为clear:both。
 以下是代码片段：
<div id="main"> 
<div id="content"></div> 
<br style="clear:both;" /> 
</div>Div即父容器不根据内容自适应高度，我们看下面的代码：



投稿来源于：http://news.2ky.cn，转载需注明。

（3）PHP默认编码

在php.ini文件中添加default_charset = "UTF-8"，设置PHP默认编码，然后重启apache。

（4）设置textarea中光标的位置

首先要使textarea获得焦点和光标，由于jquery的focus方法只是让对象获得焦点，要用DOM的focus方法才能让textarea获得光标。

document.getElementById('text').focus();

然后是设置光标的位置（textarea内已经有内容），函数如下：

 1 function setSelect(element,begin, end)
 2 {
 3     if (document.body.createTextRange)
 4     {
 5         var range = document.body.createTextRange();
 6         var text = element[element.tagName=='DIV'?'innerText':'value'];
 7         var line1 = text.substring(0, begin).split('/n').length - 1;  
 8         var line2 = text.substring(end, text.length).split('/n').length - 1;   
 9         range.moveToElementText(element)
10         range.moveEnd('character',parseInt(end) - element[element.tagName=='DIV'?'innerText':'value'].length + line2); 
11         range.moveStart('character',parseInt(begin) - line1); 
12         range.select();
13     }
14     else if(element.setSelectionRange)
15     {        
16         element.setSelectionRange(begin,end);
17     }
18 }

以上代码地址：http://blog.csdn.net/reedseutozte/article/details/5761684

最后还是存在一个问题，就是如果当前这个textarea还没有显示出来，我们就执行了以上动作，那就报错：Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLTextAreaElement.setSelectionRange]，所以一定要注意代码的顺序。

（5）JSP中request乱码

1 String id=new String(request.getParameter("id").getBytes("ISO8859-1"),"UTF-8");
2 String name = new String(request.getParameter("name").getBytes("ISO8859-1"),"UTF-8");

原文地址：http://www.blogjava.net/wonderer/archive/2007/10/25/155980.html

（6）文本框触发change，blur的顺序

change-->blur-->submit

原文地址：http://blog.csdn.net/cui_angel/article/details/7721617