none
Essential Silverlight翻译连载---第五章 续4 RRS feed

  • 常规讨论

  • 键盘事件

    Web上 使用键盘事件是一件不讨好的事。但这也并非不可能,只是有些困难,使用它需要考虑很多因素。不同的浏览器有不同的方法来接收键盘输入。一旦用户敲一个键, 将会收到一个键被按下的信息,但收到的仅仅是一个代表键的数字。对于一般的字符如字母和数字来说,这是一件非常容易的事,但如果是一个特殊键,特别是操作 系统指定的键,这就相当困难了。如果是联合键,信息将完全丢失。例如,Shift+9通常会键入一个左括号。但我现在使用的键盘布局Shift+9将键入一个右括号。

    Silverlight通过在JavaScript中提供的两套键盘代码来尽力对这种情况进行改进:

    l         跨平台键码

    l         指定平台键码

    按照一般经验,指定平台键盘代码跟ASCII码很接近(键码列表请参看http://www.asciitable.com/),然而跨平台键码会更加好用。

    当捕获键盘事件,eventArgs参数(传递事件处理方法的第二个参数)提供了以下属性:

    key

    跨平台键码

    platformKey

    指定平台键码

    ctrl

    是否按下了Ctrl键(Mac操作系统中的Apple键)

    shift

    是否按下了Shift

    提示:此时此刻,Silverlight 还没有提供对Alt键的支持(Mac操作系统中的Option键),虽然这个键很少使用,但您需要使用它来访问浏览器菜单(如Alt+F键用于打开“文件 ”菜单)。不要认为在浏览器中避免使用快捷键就可以了,因为其他浏览器和语言会使用不同的快捷键。

    Silverlight键盘事件还需要注意的地方是您只能为XAML文件中的根元素最外层的<Canvas>捕获这些事件。我们将创建一个文本输入区域来显示所输入的文本,但需要给<Canvas>元素绑定事件,如例5-12所示。这样的文本输入框并不包含在Silverlight1.0内,但将在Silverlight1.1中包含。

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    KeyDown="keyPressed">

    <Rectangle Width="200" Height="75" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="32" Canvas.Left="30" Canvas.Top="20"

                 Foreground="Black" x:Name="InputBox" />

    </Canvas>

    JavaScript代码中,我们需要确定哪些键被按下并显示它们。不同的键盘布局将导致不同的结果,我们对此做一些非常特殊的假设:

    l         键码在ASCII码的范围内

    l         只允许接收字母、数字和空格

    l         只允许使用回退键来删除字符(这是一个超出我们假设的功能)

    这些键码都在ASCII表所支持的范围之内(除了回退键需要另行处理):

    l         空格键代码是32

    l         数字键是4857

    l         大写字母是6590,小写字母是97122

    当按下一个键,如获得大写A的键码65。如果Shift键没有被按下,我们需要把这个值加上32以转化成小写字母的代码(此例中是97)。当空格键被按下,无论是否按下Shift键都没有关系。如果一个数字键被按下,Shift键必须没有被按下(还记得这一节中的Shift+9的例子吧?)。

    所以当一个有效的键或组合键被按下,我们获得一个有效的键码。JavaScript内置的一个方法String.fromCharCode()会把这些信息转化成真正的字符,这样就可以使用脚本把这些字符放到文本框内。为了完成这些,将再一次使用findName()方法:

    if (eventArgs.Ctrl) {

        return;

    }

    var keyCode = eventArgs.platformKeyCode;

    if (keyCode == 32 || //空格

       (keyCode >= 48 && keyCode <= 57 && !eventArgs.shift) || //数字

       (keyCode >= 65 && keyCode <= 90)) //字母

    {

        if ((keyCode >= 65 && keyCode<=90) && !eventArgs.shift)

        {

            keyCode += 32;

        }

        sender.findName('InputBox').text += String.fromCharCode(keyCode);

    }

    对于回退键来说,最好的选择是使用跨平台键码,它的值是1,很容易被记忆。如果这个键被按下,最后一个字符将从当前输入框内被移除。这通过JavaScript中的字符串方法substring()来实现:

    if (eventArgs.key == 1) {

        var text = sender.findName('InputBox').text;

        sender.findName('InputBox').text = text.substring(0, text.length - 1);

    }

    5-13包含了完整的JavaScript代码。当在应用程序中使用字母,数字,空格和回退键时将会显示您键入的东西(如图5-6所示)。如果您希望增加编码的复杂度,可以添加更多的字符,也可以使用跨平台键码来创建一个应用程序来体验一下有什么不同。

    5-13 捕获键盘事件,XAML JavaScript文件(TextInput.xaml.js

    function keyPressed(sender, eventArgs){

        if (eventArgs.Ctrl) {

            return;

        }

        var keyCode = eventArgs.platformKeyCode;

        if (keyCode == 32 || //空格

           (keyCode >= 48 && keyCode <= 57 && !eventArgs.shift) || //数字

            (keyCode >= 65 && keyCode <= 90)) //字母

        {

            if ((keyCode >= 65 && keyCode<=90) && !eventArgs.shift)

            {

                keyCode += 32;

            }

            sender.findName('InputBox').text += String.fromCharCode(keyCode);

        }

        else if (eventArgs.key == 1) {

            var text = sender.findName('InputBox').text;

            sender.findName('InputBox').text = text.substring(0, text.length - 1);

        }

    }

    5-6 在文本区域内显示键盘输入

    提示:当在浏览器内运行这个例子时,您需要先单击Silverlight 的显示区域以激活键盘事件处理。这实际上是一个安全功能,否则当浏览器获得焦点时,插件有可能捕获用户无意识地输入。这跟Silverlight键盘事件 不工作于全屏状态下是同样的原因。您可以在用户输入之前提示他单击Silverlight内容区域,也可以通过添加一个按钮,在开始工作时需要单击它以获 得特定的提示。

    Silverlight的事件处理不是很难的知识:您可以通过属性添加事件处理,也可以通过代码绑定(或移除)事件侦听。对于键盘和鼠标事件,eventArgs事件处理参数提供了关于事件的附加信息。还有其他类型的信息,下一次将会讲述一个最有趣的事件(例如第7章的多媒体事件)。

    进阶读物

    http://www.asciitable.com/

    ASCII码表

    http://msdn2.microsoft.com/en-us/library/ms645540.aspx

    Windows操作系统键码

    http://developer.apple.com/documentation/carbon/reference/keyboardlayoutservices/

    KeyboardLayoutReference.pdf

    Mac操作系统键码


    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:24
    版主