欢迎访问我的新主页：http://huoding.com/

作者：老王

我在给select元素动态添加option的时候，发现原本在IE/Firefox下好好的效果，放到Chrome下排序就混乱了。

最开始我还以为是我在给select添加option方法的问题：

<select>.options.add(new Option('名字', '值'));
<select>.options[<select>.options.length] = new Option('名字', '值');

但是不管我使用哪个方法，问题都没有解决，后来感觉可能是我遍历数据时使用for/in的问题，于是测试：

代码（at pastebin.com）：

01 <script>
02 var data = {
03     '4': 'first',
04     '3': 'second',
05     '2': 'third',
06     '1': 'fourth'
07 };
08
09 var result = '';
10
11 for(var i in data) {
12     result += data[i] + '<br />';
13 }
14
15 window.onload = function() {
16     document.body.innerHTML = result;
17 };
18 </script>

在Firefox下浏览，结果如下：

first
second
third
fourth

在Chrome下浏览，结果如下：

fourth
third
second
first

如果我们把对象属性从数字型换成字符串型会如何呢？

02 var data = {
03     '_4': 'first',
04     '_3': 'second',
05     '_2': 'third',
06     '_1': 'fourth'
07 };

如此一来顺序就正常了。

从结果来看，Chrome下用for/in遍历对象时，如果对象属性名是数字型的话，可能会出现乱序现象，而IE，Firefox则没有此类问题。至于原因，在遍历对象时，Chrome对数字型的属性处理有特殊性所致（官方认为这不是Bug），如果是字符串型的属性则没有问题。

注释：文章内容经网友提醒已做出适当修改。

欢迎访问我的新主页：http://huoding.com/

作者：老王

作为前端技术菜鸟的我又开始记笔记了（大牛可以闪开了），这次说的是Tab切换，这个功能很居家，基本上资讯类网站都有，比如说新浪，网易。但你仔细观察的话，会发现他们在实现上有些许的不同，新浪的Tab切换是单纯的onmouseover事件处理，只要鼠标划过就会触发，而网易的Tab切换则有一个延迟切换的效果，如果鼠标快速划过的话，Tab是不会切换的，鼠标必须悬浮些许的时间才会产生效果，个人观点，网易的效果相比新浪的效果而言，用户体验更好一些。延迟切换的意义在于用户很多时候会随意移动鼠标，这些无意义的操作可能会偶然触发Tab切换，虽然这并没有什么副作用，但是毕竟属于意料之外的事情。对用户而言，意料之外的事情越少越好。

代码（at pastebin.com）：

01 <style>
02 li { list-style:none; }
03 #title li { cursor: pointer; display: inline; }
04 #title li.current { background-color: red }
05 #content li { display: none; }
06 #content li.current { display: block; }
07 </style>
08
09 <ul id="title">
10 <li class="current">FOO</li>
11 <li>BAR</li>
12 </ul>
13
14 <ol id="content">
15 <li class="current">foo</li>
16 <li>bar</li>
17 </ol>
18
19 <script>
20 (function(){
21     var delay = 150;
22
23     var titles   = document.getElementById("title").getElementsByTagName("li");
24     var contents = document.getElementById("content").getElementsByTagName("li");
25
26     for (var i = 0; i < titles.length; i++) {
27         (function(){
28             var id;
29
30             var index = i;
31
32             titles[i].onmouseover = function() {
33                 id = setTimeout(function() {
34                     for (var i = 0; i < titles.length; i++) {
35                         if (i == index) {
36                             titles[i].className   = "current";
37                             contents[i].className = "current";
38                         } else {
39                             titles[i].className   = "";
40                             contents[i].className = "";
41                         }
42                     }
43                 }, delay);
44             };
45
46             titles[i].onmouseout = function() {
47                 clearTimeout(id);
48             };
49         })();
50     }
51 })();
52 </script>

代码逻辑很简单，就是onmouseover的时候setTimetout，onmouseout的时候clearTimeout。现在，你快速移动鼠标的话，Tab是不会被意外切换的，因为已经clear了，虽然代码很简单，但是用户体验的提升确是很实在的，类似这样的细节，量变汇聚质变，细节决定成败。

欢迎访问我的新主页：http://huoding.com/

作者：老王

我的前端技术纯属门外汉，不过代码总要写，所以记了一些简单的笔记，请勿见笑：

平常设计表单的时候，我们会加入一些提示文字，比如说在搜索框里，我们会提示“请输入关键字”，并在搜索框得到焦点和失去焦点的时候适时的隐藏和显示，最常见的做法是利用value来设置：

代码（at pastebin.com）：

01 <form id="search">
02 <input type="text" id="keyword" name="keyword" value="请输入关键字">
03 <button>搜索</button>
04 </form>
05
06 <script>
07 document.getElementById("keyword").onfocus = function() {
08     if (document.getElementById("keyword").value == "请输入关键字") {
09         document.getElementById("keyword").value = "";
10     }
11 }
12 document.getElementById("keyword").onblur = function() {
13     if (document.getElementById("keyword").value == "") {
14         document.getElementById("keyword").value = "请输入关键字";
15     }
16 }
17 document.getElementById("search").onsubmit = function() {
18     var keyword = document.getElementById("keyword").value;
19     if (keyword == "" || keyword == "请输入关键字") {
20         alert("请输入关键字");
21         return false;
22     }
23     return true;
24 }
25 </script>

如此的代码虽然实现了我们要的功能，但却不干净，原因在于“请输入关键字”这样的文本仅仅是提示文字而已，而不是value，虽然技术上没有大问题，但很多时候还是显得麻烦，比如说我们可能像让提示文字显示的颜色是灰色，而用户键入的文本则显示黑色。

下面看看如何利用css来实现更好的方式：

代码（at pastebin.com）：

01 <style>
02 #wrapper { position: relative; display: inline; }
03 #description { position: absolute; left: 1px; color: #999999; display: none; }
04 </style>
05
06 <form id="search">
07 <div id="wrapper">
08 <label for="keyword" id="description">请输入关键字</label>
09 <input type="text" id="keyword" name="keyword">
10 </div>
11 <button>搜索</button>
12 </form>
13
14 <script>
15 window.onload = function() {
16     if (!document.getElementById("keyword").value) {
17         document.getElementById("description").style.display = "inline";
18     }
19 };
20 document.getElementById("keyword").onfocus = function() {
21     if (!document.getElementById("keyword").value) {
22         document.getElementById("description").style.display = "none";
23     }
24 }
25 document.getElementById("keyword").onblur = function() {
26     if (!document.getElementById("keyword").value) {
27         document.getElementById("description").style.display = "inline";
28     }
29 }
30 document.getElementById("search").onsubmit = function() {
31     if (!document.getElementById("keyword").value) {
32         alert("请输入关键字");
33         return false;
34     }
35     return true;
36 }
37 </script>

这样的实现方式虽然CSS，JS代码都多了一些，但是结构更合理，通过引入label来显示提示文字（通过CSS的position属性定位），让value本身更单纯，而且提示文字和用户输入的文本在样式更容易控制，比如颜色的深浅，从而提高表单可用性。

BTW：还有很多增加表单可用性的方式，再比如这个：通过ime-mode控制输入法

欢迎访问我的新主页：http://huoding.com/

作者：老王

最近在公司做了一个项目，测试时遇到问题：IE6/7报错：Internet Explorer cannot open the Internet site。

先用少量代码重现一下问题：

<html>
<head>
<title>test</title>
</head>
<body>

<div>
<script>
var p = document.createElement("p");
p.innerHTML = "test";
document.body.appendChild(p);
</script>
</div>

</body>
</html>

用IE6/7浏览上面代码就能看到错误信息了（IE8，Firefox表示情绪稳定），如果没有相关版本IE，可以使用IETester。逐句调试，会发现源头是document.body语句，只要javascript脚本包含在div，table之类的容器中，再对document.body做任何操作都会触发这个问题。

解决方法有几种，比较简明的是使用类似window.onload的方法等DOM加载完成后再执行javascript代码。

通过网络搜索到了一些相关资料，里面详细介绍了问题的原因及解决方法，有兴趣可参阅：

Internet Explorer Programming Bugs
Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer?

欢迎访问我的新主页：http://huoding.com/

作者：老王

最近写代码，处理很多表单，里面的Submit按钮有两种形式，分别是input和button，有点区别，做个试验：

先创建一个php文件demo.php，用来接收表单数据：

<?php
var_dump($_POST);
?>

再创建一个html文件demo.html，用来显示表单：

<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form>

<form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>

使用Firefox依次浏览，就能看到input和button的区别：input提交按钮显示的文字就是value，而button提交按钮显示的文字和value是独立的，从这个意义上来看，button更有表现力，是更值得推荐的提交按钮实现方式。

可惜IE总是拖后腿，使用IETester里的IE6，7，8分别浏览，就会发现button提交按钮在IE下有Bug：

首先，在IE6里，如果一个表单里有多个button形式的提交按钮，那么不管你点击其中哪个按钮，所有的button按钮都会被提交，而在IE7，8里则点击哪个按钮，才提交哪个button按钮。此时，如果想在服务端判断用户点击了哪个按钮，只能使用Javascript来处理。

另外，在IE6，7，8里，button形式的按钮在提交后，value属性都失效了，显示文字取代了value。

总结：从理论上来看，button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性，很多时候还是只能使用input形式的提交按钮。

参考：http://www.w3.org/TR/html401/interact/forms.html