DHTML Cross-Browser: Kestrokes

动态基本教程第六节: 键盘控制

我们已经学到了

定义一个 DIV 元素，以及用 CSS 来给出它的性质 (CSS 位置设定)
如何知道哪种浏览器正在被使用 (通用程序)
如何设立一个通用的指针变量指向一个 DIV 元素 (通用程序)
以及如何显示或隐蔽这个 DIV 元素 (显示和隐蔽)
移动这个 DIV 元素 (元素的移动)
连续移动这个 DIV 元素 (元素的滑动)

这一节我们将告诉你如何运用键盘来控制这些运动方. 请你记住
我们的目标是写出兼容在 NetScape 和 Internet Explore 上的程序

Capturing Keystrokes

相应敲击键是电脑和人的基本相互作用。你可以控制任何一个键的按下和松开。
首先我们先要知道如何启动一个所谓的事件 (event). 下面是启动一个把键按下的
"onkeydown" 的事件.

  document.onkeydown = keyDown

这里的 keyDown 是你所要编写的相应键盘的子程序。当你的浏览器读了以上的
语句，它将会知道哪个键被按下了，然后启动子程序 keyDown()。子程序的名
字随你起了，在这里在子程序名字后面不需要括号。取得哪个键被按下却在
Netscape 和 IE 有所不同。

Netscape

Netscape 在处理取得哪个键被敲击的时候比较烦琐点儿。

  document.onkeydown = keyDown
  if (ns4) document.captureEvents(Event.KEYDOWN)

你的 keyDown() 子程序必须传递一个隐藏的变量，我们这里把这比变量叫 "e"，
只是因为大家都这么叫.

  function keyDown(e)

这个 "e" 表示那个被按的键。想要知道哪个键被按了，你需要用 e 的 which
性质：

  e.which

这只能告诉你这个键的内部码. 所以你还要用字串处理程序把它转成数字或字母.

  String.fromCharCode(e.which)

综上所述, 我们写一个 keyDown() 子程序, 它打开一个窗口告诉哪个键被按了.

  function keyDown(e) {
    var keycode = e.which
    var realkey = String.fromCharCode(e.which)
    alert("keycode: " + keycode + "\nrealkey: " + realkey)
  }

  document.onkeydown = keyDown
  ocument.captureEvents(Event.KEYDOWN)

Internet Explorer

IE 的语句比较简单一些. 但它不是用 e.which而是用 window.event.keyCode
来取得被按的键的值.

  function keyDown() {
    var keycode = event.keyCode
    var realkey = String.fromCharCode(event.keyCode)
    alert("keycode: " + keycode + "\nrealkey: " + realkey)
  }

  document.onkeydown = keyDown

兼容两者

你如果在你的机器上试验了上述两种浏览器, 你会发现所显示的 realykey 值不见
得一样. 这是因为它们用的不同的字码. 这点很糟糕, 我们将无法把它们统一起来.
也就是说, 我们必须写不同的语句为不同的浏览器. 所以说我们干脆不再考虑键的
真码 real key value 而只考虑键的内码 key code.

下面的语句对次做出如下的调整. 如果用的是 Netscaep, 变量 nKey 将会得到 key
code, 而让 ieKey 为 0. 相反, 如果用的是 IE, ieKey 为 key code 而 nKey 为 0:

  function keyDown(e) {
	if (ns4) {var nKey=e.which; var ieKey=0}
	if (ie4) {var ieKey=event.keyCode; var nKey=0}
	alert("nKey:"+nKey+" ieKey:" + ieKey);
  }

  document.onkeydown = keyDown
  if (ns4) document.captureEvents(Event.KEYDOWN)

看这个范例

下面我们就讨论如何运用

用键盘移动元素

假如你想用键盘来启动你的滑动, 你需要先知道哪个键被按了, 然后用相应的子程序
来滑动元素. 下面我们准备用 "A" 键来启动滑动子程序. Netscape 的 "A" 是 97.
而 IE 是 65. 也就是说, nKey 为 97 而 ieKey 为 65.

  function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
	block.xpos = parseInt(block.left)

	document.onkeydown = keyDown
	if (ns4) document.captureEvents(Event.KEYDOWN)
  }

  function keyDown(e) {
	if (ns4) {var nKey=e.which; var ieKey=0}
	if (ie4) {var ieKey=event.keyCode; var nKey=0}
	if (nKey==97 || ieKey==65) {   // if "A" key is pressed
		slide()
	}
  }

  function slide() {
    if (block.xpos <300) { block.xpos +="5" block.left="block.xpos" status="block.xpos" // not needed, just for show setTimeout("slide()",30) } }

看这个范例

启动变量

毫无疑问, 你注意到在上一个范例中, 一但滑动就停不下来了直到终点. 我们
这里介绍一种方法: 启动变量, 来控制滑动的挺和启动. 这个变量记录了元素
是否在动还是不动. 然后在滑动子程序里放置 "if" 语句, 根据这个启动变量
的值来决定是否停止还是继续滑动.

  function slide() {
    if (myobj.active) {
	myobj.xpos += 5
	myojb.left = myobj.xpos
	setTimeout("slide()",30)
    }
  }

上面这个滑动子程序只有当变量 myobj.active 等于 true 的时候才继续要不
然, 就不在滑动了. 显然现在的滑动子程序比较聪明了.

使用 onKeyUp 和启动变量来控制滑动

onkeyup 就是 onkeydown 相反, 也就是说它用来对键起来这个事件做出反应的.

  document.onkeydown = keyDown
  document.onkeyup = keyUp
  if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)

keyUp() 子程序当然也是由你来写的. 在这里, 我们想让它在被按下的键松开的时候
它能停止元素的滑动. 也就是是说把那个启动变量设置为 0 就行了.

  function keyUp(e) {
	if (ns4) var nKey = e.which
	if (ie4) var ieKey = window.event.keyCode
	if (nKey==97 || ieKey==65) block.active = false
  }

下面就是一个完整的程序. 不知道你是否看懂的它. 在 keyDown 子程序里, 用了变量
block.active. (! = NOT), 使得 keyDown 只当元素不动的时候才启动 slide 子程序. 而
slide 子程序里, 我们也用到 if (block.active) 语句, 使得只有当 block.active 的值是
true 的时候才滑动元素.

  function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
	block.xpos = parseInt(block.left)
	block.active = false

	document.onkeydown = keyDown
	document.onkeyup = keyUp
	if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
  }

  function keyDown(e) {
	if (ns4) {var nKey=e.which; var ieKey=0}
	if (ie4) {var ieKey=event.keyCode; var nKey=0}
	if ((nKey==97 || ieKey==65) && !block.active) {   // if "A" key is pressed
		block.active = true
		slide()
	}
  }
  function keyUp(e) {
	if (ns4) {var nKey=e.which; var ieKey=0}
	if (ie4) {var ieKey=event.keyCode; var nKey=0}
	if (nKey==97 || ieKey==65) {
		block.active = false   // if "A" key is released
	}
  }

  function slide() {
	if (block.active) {
		block.xpos += 5
		block.left = block.xpos
		status = block.xpos       // not needed, just for show
		setTimeout("slide()",30)
	}
  }

看这个范例

我们可以用那些键呢?

我们前面曾说过, 两个浏览器用的不东的字码集. 各有各的特点. 比如 Netscape 可以
区别大小写而 IE 就不成. 但 IE 却能知道项 Ctrl, Shift, Alt, arrow keys 而 Netscape 却
不行. 总的来说, 用字母, 数字, 空格是没问题的.