• OnKeyPress事件和Javascript检测键盘输入


    对于有些时候,我们需要检测用户键盘输入的键盘信息,来处理一些相应的事件。

    这里田子建议使用OnKeyPress=“”事件来处理。相类似的还有OnKeyUp和OnKeyDown事件,这些田子个人认为都不是特别的理想化。

    假如,我们预定义一个方法function EventCommand(oEvent){ document.write(oEvent.keyCode); },这个方法用来显示输入键盘的键值。那么在OnKeyPress传值的时候,就必须这么传:OnKeyPress="EventCommand(event);",这里参数event是关键字。

    这里给出一些键盘的键值:

    回车            keyCode is 13
    ESC           keyCode is 27
    Backspace keyCode is 8
    Tab             keyCode is 9
    Shift            keyCode is 16
    Ctrl              keyCode is 17
    Alt             keyCode is 18
    Space         keyCode is 32
    Insert          keyCode is 45
    Delete         keyCode is 46

    我们看到什么?

    这样一个keyCode的发现,最好的作用是用来检测textbox框里的用户输入。我们假设一个这样的情况,用户提出在页面有很多文本框输入的时候,最好是每一个文本框输入完以后按回车键,跳入下一个文本框。这要换在以前除了按tab是不可能实现的。那么现在,我们可以利用用户在文本框输入的键盘键值进行判断并执行。

    代码如下:

    &ltHTML>
    &ltHEAD>
    &ltTITLE>handleEnterKey</TITLE>
    &ltscript language="JavaScript" text="text/javascript" src="handleEnterKey . JS">

    </script>
    </HEAD>

    &ltBODY onload="handleTag('input');" OnKeyPress="handleTag('input');">
    &ltinput id="tb1" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" />&ltbr>
    &ltinput id="tb2" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/>&ltbr>
    &ltinput id="tb3" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/>&ltbr>
    &ltinput id="tb4" type="textbox" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);"/>&ltbr>
    </BODY>

    </HTML>

    js文件的内容:

    var tb = 0;
    var ArrayTextBox ;
    function handleTag(tTagName){
    ArrayTextBox = document.getElementsByTagName(tTagName);
    ArrayTextBox[tb].focus();
    }
    function handleEvent(oEvent){
    if (oEvent.keyCode == 13)
    {
       if (tb&ltArrayTextBox.length-1)
       {
        tb += 1;
        ArrayTextBox[tb].focus();
       }else{
        tb -= ArrayTextBox.length-1;
        ArrayTextBox[tb].focus();
       }
    }
    }
    function setFocusNum(oTextBox){
    for (var i=0;i&ltArrayTextBox.length;i++)
    {
       if (ArrayTextBox[i].id == oTextBox.id)
       {
        tb=i;
       }
    有一个问题~!

    问题有两个:第一,这个例子不具有泛用性,意思是,这个js文件,充其量只能在静态页面或者asp页面或者其他web语言并且是基于html的情况下才可以。第二,如果页面出现其他input标签,并且该标签的type不是textbox的话,这个方法也不具有泛用性。

    下面这段代码是aspx页面上文本框按回车自动跳转的。他很好的规避了以上两个问题。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    &lthtml xmlns="http://www.w3.org/1999/xhtml" >
    &lthead runat="server">
        &lttitle>Untitled Page</title>
        &ltscript defer="defer" src=handleEnterKey . JS type="text/javascript"></script>
    </head>
    &ltbody OnLoad="handleTag('input');" OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" OnFocus="setFocusNum(this);"> <!-- OnClick="setFocusNum(this);" OnKeyPress="handleEvent(event);" OnFocus="setFocusNum(this);" -->
        &ltform id="form1" runat="server">
        &ltdiv>
            &ltasp:TextBox ID="TextBox2" runat="server"></asp:TextBox>&ltbr />
            &ltasp:TextBox ID="TextBox3" runat="server"></asp:TextBox>&ltbr />
            &ltasp:TextBox ID="TextBox4" runat="server"></asp:TextBox>&ltbr />
            &ltasp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>
        </form>
        &ltlabel id="lMessage"></label>
    </body>
    </html>

    然后是js文件:

    var tb = 0;
    var ArrayTextBox;
    var range;
    function handleTag(tTagName){
    var tmp = document.getElementsByTagName(tTagName);
    range = document.body.createControlRange();
    for(var i=0;i&lttmp.length;i++){
         if(tmp[i].type == "text"){
        range.add(tmp[i]);
         }
    }

    ArrayTextBox = range.item(0);
    ArrayTextBox.focus();
    lMessage.innerText = tb;


    }
    function handleEvent(oEvent){
    if (oEvent.keyCode == 13)
    {
       if (tb&ltrange.length-1)
       {
        tb += 1;
        ArrayTextBox = range.item(tb);
        ArrayTextBox.focus();
        lMessage.innerText = tb;
       }else{
        tb -= range.length-1;
        ArrayTextBox = range.item(tb);
        ArrayTextBox.focus();
        lMessage.innerText = tb;
       }
    }
    }
    function setFocusNum(oTextBox){
    for (var i=0;i&ltrange.length;i++)
    {  
         ArrayTextBox = range.item(i)
       if (ArrayTextBox.id == oTextBox.id)
       {
        tb=i;
       }
    }
    lMessage.innerText = tb;
    }

    哦??为什么OnLoad的时候是传input??

    恩,是的,他最不可思议的地方就是传的是input而不是当初我想当然的asp:textbox。当然不排除你可能比我聪明更快的想到了为什么。
    这个方法,或者说功能最主要的目的是用在客户端,而无论服务器端是怎样的语言,对于浏览器而言,他只能接受html信息,所以,aspx页面最终将会转变成html里的input标签,文本框则是type为text。
    所以打开任意一个aspx页面的客户端源文件,就会发现这一点。(我得承认我发现的太晚。)

    结束语

    他其实还能做很多事情~~哈哈~~

    [文章出自:http://www.tzwhx.com/newOperate/html/2/22/223/17381.html]

    关注下面二维码,订阅更多精彩内容。
    微信打赏
    关注公众号(加好友):

  • 相关阅读:
    一些业内有名的网站收集
    WCF重载
    FCKEditor fckconfig.js配置,添加字体和大小 附:中文字体乱码问题解决
    查询第几条到第几条的数据的SQL语句
    SPOJ 9939 Eliminate the Conflict
    UVA 10534 Wavio Sequence
    HDU 3474 Necklace
    POJ 2823 Sliding Window
    UVA 437 The Tower of Babylon
    UVA 825 Walking on the Safe Side
  • 原文地址:https://www.cnblogs.com/vipstone/p/1866944.html
Copyright © 2020-2023  润新知