039. asp.netWeb用户控件之七实现具有虚拟键盘的功能的用户控件

用户控件ascx代码:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Keyboard.ascx.cs" Inherits="Keyboard" %>
<link href="js/jquery.keypad.alt.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<script type="text/javascript">
    $(function () {
//初始化keypad插件
    $('#defaultKeypad').keypad({prompt:'',keypadOnly:false,layout:$.keypad.qwertyLayout});
});
</script>
<input id="defaultKeypad" type="password" name="pwd" maxlength="12" style="width:150px"/>

用户控件ascx.cs代码:

public partial class Keyboard : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    /// <summary>
    /// 返回虚拟键盘取得的值
    /// </summary>
    /// <returns></returns>
    public string getvalue()
    {
        System.Collections.Specialized.NameValueCollection nv = new System.Collections.Specialized.NameValueCollection(System.Web.HttpContext.Current.Request.Form);
        return nv.GetValues("pwd")[].ToString();
    }
}

Default.aspx代码:

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

<%@ Register src="Keyboard.ascx" tagname="Keyboard" tagprefix="uc1" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        .style1
        {
            width: 144px;
            height: 36px;
        }
        .style2
        {
            width: 152px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table align="center" cellpadding="0" cellspacing="0" >
            <tr>
                <td class="style2">
                    用&nbsp; 户&nbsp; 名：</td>
                <td class="style1">
                    <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                </td>
                <td class="style3">
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                        ControlToValidate="txtUserName" ErrorMessage="*"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码：</td>
                <td class="style1">
                    <uc1:Keyboard ID="Keyboard1" runat="server" />
                </td>
                <td class="style3">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;</td>
                <td class="style1">
                    <asp:Button ID="Button1" runat="server" Text="登录" onclick="Button1_Click" />
&nbsp;

                    <input id="Button2" type="button" value="退出" onclick="window.close();"/></td>
                <td class="style3">
                    &nbsp;</td>
            </tr>
        </table>
        <br />
        <br />

    </div>
    </form>
</body>
</html> 

Default.aspx.cs代码:

 protected void Button1_Click(object sender, EventArgs e)
    {
        if (Keyboard1.getvalue() != "")
        {
            //获取用户输入的信息, 包括登录名和通过软键盘输入的面
            string info ="登录名："+txtUserName.Text+"登录密码："+Keyboard1.getvalue();
            //弹出提示, 以便测试查看
            ClientScript.RegisterStartupScript(this.GetType(), "", "alert('"+info+"');", true);
        }
        else
        {
            ClientScript.RegisterStartupScript(this.GetType(), "", "alert('请输入密码');", true);
        }
    }

示例中用到的js文件下载:

http://pan.baidu.com/s/1kVyPxZp

最终效果图: