分类存档: 编写实现 - 第2页

javascript键盘事件总结

作者: boke 日期: 2009年03月24日没有评论

这两天做了一个AutoComplete，顺便研究了一下js的键盘事件，简单总结一下学到的东西

Firefox	返回键值
keyCode(keypress)	功能键(Shift,Ctrl,Alt,PrintScreen,ScrollLock无返回值)返回正确值，以外的所有键值皆为0
keyCode(keydown)	返回除PrintScreen外所有键值，字母键皆以大写状态显示键值(65-90)
keyCode(keyup)	返回除PrintScreen外所有键值，字母键皆以大写状态显示键值(65-90)
charCode(keypress)	返回字符键大小写键值(65-90，97-122)，Shift,Ctrl,Alt,PrintScreen, ScrollLock无返回值，其他所有键值为0
charCode(keydown)	所有键值为0
charCode(keyup)	所有键值为0
IE	返回键值
keyCode(keypress)	返回出系统按键外所有字符键的正确值(区分大小写状态65-90，97-122)
keyCode(keydown)	返回除PrintScreen外所有键值，字母键皆以大写状态显示键值(65-90)
keyCode(keyup)	返回除PrintScreen外所有键值，字母键皆以大写状态显示键值(65-90)
charCode	IE不支持该属性

关于三个键盘事件的区别网上通常这样解释
onkeydown 在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
onkeyup 在用户放开任何先前按下的键盘键时发生。

通俗的理解可以像以上那样，但其实并不是如此，我的试验也证实像上下键、退格、回车等在onkeypress事件里也可以在部分浏览器中(如:firefox)被识别。这其中包含keycode向charcode转化，系统对输入流接收、处理、输出等的复杂过程，并且不同浏览器的处理也不尽相同。应该在实际应用中具体把握，明天去公司把我写的测试程序补充上。

特别注意一下，在Opera下，对于onkeydown的默认行为是不能用event.preventDefault()来取消的。

3.25更新：
我用的两个测试文件，key.html能测试每个事件中包含的内容，keyCode等,key0.html能测试键盘事件触发顺序等。

浏览器对CSS选择器支持情况

作者: boke 日期: 2009年02月26日没有评论

应该说是目前最全的总结了，FROM：CSS, JavaScript and XHTML Explained— Estelle Weyl。

绿色 / √ 表示目前支持。
橙色/ Δ 表示浏览器部分支持当前CSS选择器。
红色/ Χ 表示浏览器完全不支持。

点击图片查看大图

点击图片查看大图

原文地址：http://www.evotech.net/blog/2009/02/css-browser-support/

javascript的字符串比较

作者: boke 日期: 2009年02月25日没有评论

今天写程序时发现了一个以前虽然知道但总没引起我注意的问题，记录一下，防止再犯。

代码像下面这样：

很简单，元素a的高是290px，元素b的高是变动的，val的值等于a和b中高度小的。恩，好像没啥不对。

bheight="210px"，试试，val="210px"，对；bheight="160px"，再试，val="160px"，还对；那么bheight="99px"呢？val的值是99px吗？错了，这时候alert出了290px。

呵呵，忘了javascript的字符串比较是从第一个字符开始一个一个字符比较的了，当两个字符相等时接着比较下一个，当出现不相等的就停下。在这个例子里，"29"大于"21"，所以"290px">"210px"，"2"大于"1"，所以"290px">"160px"，而9大于2，所以"99px">"290px"哈。

document.documentElement和document.body

作者: boke 日期: 2009年02月13日没有评论

昨天在试.xhtml时，看网上说要得到<html>节点，在xhtml里要用document.documentElement，而在html 4里要用document.body，以前虽然知道它俩之间的区别，但还真没仔细注意过。结果我一试，不管是用xhtml还是html，不管是加DOCTYPE还是不加，document.documentElement总是<html>节点，document.body总是<body>节点。

这是咋回事呢？后来找了半天，在一个博客里看到，好像只有在IE 4以前的浏览器才认为document.body是<html>节点，具体怎样说的我也忘了，现在再找那个博客也找不到了。我也没有IE 6以前版本的浏览器，没法试，算了，就这样吧，谁还会用IE 6以前的浏览器呢？

所有的现代浏览器都认为document.documentElement可以得到<html>，document.body可以得到<body>。

不过我可没说在IE下，带DOCTYPE的文件和不带的，对documet.documentElement的解释是完全一样的。例如，我们要得到浏览器的显示区域大小，在带DOCTYPE的文件里，我们要用document.documentElement.clientWidth/document.documentElement.clientHeight来得到；而在不带DOCTYPE的文件里，这时documentElement.clientWidth/clientHeight都等于0，我们要用document.body.clientWidth/document.body.clientHeight来得到。

明白了吗？不明白的话，那咱就来点更糊涂的。

接着上面那个例子，我们现在通常使用的得到浏览器显示区域大小的函数通常可以简单的这样写：

<script type="text/javascript">
function documentHeight() {
  var de = document.documentElement;
  return window.innerHeight || ( de && de.clientHeight ) || document.body.clientHeight;
}

function documentWidth() {
  var de = document.documentElement;
  return window.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;
}
</script>

这里的window.innerWidth，document.documentElement.clientWidth，document.body.clientWidth都是啥意思呢？都是为了得到浏览器显示区域的宽，第一个是适用于非IE系的，第二个是适用于带有DOCTYPE的IE 浏览器的，第三个是适用于不带有DOCTYPE的IE 浏览器的。

怎么样？乱不？

感觉还行的话，还有更刺激的，加不加DOCTYPE，不同的浏览器，有没有设置margin，这么多种情况，排列组合一下，测试一下以上那三个值，绝对够你喝一壶的。

如果感觉乱，那就到此为止吧，我们按w3c那帮闲人的标准来，加上DOCTYPE。

.xhtml扩展名

作者: boke 日期: 2009年02月12日 2 条评论

今天在研究手机开发时的javascript应用时，不经意间发现了个小问题，现来看一下这两个文件：

a.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>1</title>
<script type="text/javascript">
window.onload = function()
{
var pp = document.documentElement.childNodes;
for (p in pp)
{
alert(pp[p]);
}
}
</script>
</head>
<body>
</body>
</html>

b.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>1</title>
<script type="text/javascript">
window.onload = function()
{
var pp = document.documentElement.childNodes;
for (p in pp)
{
alert(pp[p]);
}
}
</script>
</head>
<body>
</body>
</html>

发现两个文件的不同之处了吗？其实上面两个文件是完全一样的，除了扩展名。

由于要做手机开发，有人建议说用.xhtml这个扩展名更好一些，于是就用了。本想用js得到body这个节点，结果试了几次pp[0]都不对。

我用的是XHTML-MP 1.2的DOCTYPE，难道DOCTYPE不对？好，换成标准的xhtml的DOCTYPE，就是a.xhtml这样的，还是不对啊！

难道js代码写的有问题？（这里有段小插曲，在下篇文章详述）百度一下，再翻出以前写的看看，没问题啊！还有哪儿不对呢？

按网上和我以前的经验来说，pp[0]是<head>，pp[1]是<body>才正对呀！不管了，先把pp都alert出来看看是啥东西再说。这一alert发现问题了，多出三个[object Text]，分别位于<head>前面，<head>和<body>之间，<body>之后。这种情况，甭问肯定是换行符所致，删掉，果然没问题了。

记得以前没出现这种情况，那可能就是扩展名的问题了，另存为b.html，再试，没问题了，这才恍然大悟，怪不得年前看过一个手机页面，一个换行符也没有。

来个刨根问底，查查这个.xhtml到底咋回事，百度了半天，没找到，google了半天，好像（为什么加个好像呢?答案看我2月12号的饭否）也没找到。

哪位有缘人路过提点提点，期待ing！！！

大风口

I want to change the world!