zoukankan      html  css  js  c++  java
  • 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="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")[0].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

    最终效果图:

  • 相关阅读:
    多测师讲解app测试 _app原理图解_高级讲师肖sir
    多测师讲解 app_模拟器的端口号_高级讲师肖sir
    多测师讲解appium _开启注意点_高级讲师肖sir
    多测师讲解app _xpath插件_高级讲师肖sir
    多测师讲app测试 _appium实战(1)_高级讲师肖sir
    多测师讲解app测试 _ADB常用的指令_高级讲师肖sir
    jmeter分布式测试
    常用命令
    Linux安装pycharm
    请求头信息介绍
  • 原文地址:https://www.cnblogs.com/wxylog/p/6196647.html
Copyright © 2011-2022 走看看