Live in code

今天在 chrome 下发现一个 innerHTML 调用的时候抛出 DOM Error 问题. 经过一番折腾之后发现是 webkit 对于某些 DOM 元素的 innerHTML 属性有只读保护机制. 但是 firefox 上面确没有这类问题.

经过 google 的一番查证之后, 发现这个不仅仅是 webkit 类浏览器的问题. 其实 ie 也是. msdn 文档如是说:

innerHTML:
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

说白了就是这几个特殊的 DOM 元素的 innerHTML 属性是只读的.

当当当当~ 经验值 +320.

对这个问题今天作了一个跨浏览器的研究. 首先当一个 Form 中只有一个 Input 的时候, 例如:

<form>
  <input type="text" name="name" value="name" />
</form>

不管哪个浏览器都是可以通过 Enter 来提交当前表单的. 但是当 Form 中存在两个及两个以上 Input 的时候.

1. IE 和 Firefox
需要在 Form 中加入 type 为 submit 的 Input, 才能实现 Enter 提交. 例如:

<form>
  <input type="text" name="name" value="name" />
  <input type="password" name="pwd" value="pwd" />
  <input type="submit" />
</form>

2. Webkit 和 Opera
无论什么时候, 加不加 type 为 submit 的 Input 都可以直接 Enter 提交. 例如:

<form>
  <input type="text" name="name" value="name" />
  <input type="password" name="pwd" value="pwd" />
</form>

过去一直以为 label 标签中的 for 属性是关键. 只有指定了对应的 id 给 for 属性, 才能让 label 起作用. 但是最近看到一种写法:

<label>
  <input type="checkbox" />
  check it
</label>
<!-- 其实只要把你那个对应的元素包含在 label 中就可以了 -->

这样你点击文本 "check it" 就和点击那个 checkbox 的效果是一样的了.
(P.S. 当然咯 如果 label 和 目标元素 距离很远, 那还是用 id 属性指定为好.)

首先谢谢 wujiang 的推荐, 在详细阅读 Sinatra 的文档和看了 rubyconf 的视频之后, 我举双手认同这个新的 ruby web 框架.

它没有 rails 那样的臃肿(? 之前我们说 rails 多么敏捷轻量阿... ). 它可以十分便捷地将所有现成的东西集成进来. 你不需要做很多的配置, 你只要知道我需要什么, 然后你就用吧.
它十分Restful: GET/POST/PUT/DELETE 都是集成的. 方便将 web 应用写成良好的格式.
它支持多种模板: Haml Erb Sass Builder
它支持多种持久层框架: Datamapper Sequel ActiveRecord

更多的细节可以查阅: Sinatra - The Book (一个十分短小的优质文档)
PS. 我喜欢 Sequel!