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

• 定义一个 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 却
不行. 总的来说, 用字母, 数字, 空格是没问题的.