错误与技巧笔记

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

(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

posted @ 2013-03-22 15:29  findingsea  阅读(232)  评论(0编辑  收藏  举报