html5弹出数字键盘 html输入数字

转载

mob64ca140d61c6 2024-05-11 15:03:43

文章标签 html5弹出数字键盘 html class div postback 文章分类 HTML5 移动开发

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DeC.aspx.cs" Inherits="P_DeC" %>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>无标题页</title>
 <style>
 body {margin:0px;padding:0px;background-image:url('<%=CurrentPath+"Imags/B/lb.gif" %>')}    
 input {border:0px;border-bottom: 1px solid #000066;width:96%;text-align:right;margin:10px;font-size:30px;}
 div.lt {clear:both;background-color:Red;}
 div.mc {width:33%;float:left;overflow:hidden;border-bottom:solid 1px black;}
 a {width:100%;}
 img {border:0px;}
 </style>
 </head>
 <body>
     <input type='text' value='<%=CurrentValue %>' dir="rtl"/>
     <div class="lt">
         <div class="mc"><a href='DeC.aspx?s=1' value='1' mt="one.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/one.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=2' value='2' mt="two.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/two.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=3' value='3' mt="three.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/three.gif" %>' /></a></div>
     </div>
     <div class="lt">
         <div class="mc"><a href='DeC.aspx?s=4' value='4' mt="four.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/four.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=5' value='5' mt="five.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/five.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=6' value='6' mt="six.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/six.gif" %>' /></a></div>
     </div>
     <div class="lt">
         <div class="mc"><a href='DeC.aspx?s=7' value='7' mt="seven.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/seven.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=8' value='8' mt="eight.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/eight.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=9' value='9' mt="nine.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/nine.gif" %>' /></a></div>
     </div>
     <div class="lt">
         <div class="mc"><a href='DeC.aspx?s=c' value='c' mt="c.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/c.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=0' value='0' mt="zero.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/zero.gif" %>' /></a></div>
          <div class="mc"><a href='DeC.aspx?s=b' value='b' mt="back.gif" οnmοuseοver="ov(this)" οnmοuseοut="ob()"
          onclick ='return oc(this)'><img src='<%=CurrentPath +"Imags/D/back.gif" %>' /></a></div>
     </div>
 </body>
 <script>
 var path='<%=CurrentPath %>'+'Imags/D/'
 var value=Number('<%=CurrentValue %>');
 var pt = document.getElementsByTagName('input');
 var vt = pt[0];

 function oc(t)
 {
   var v = t.getAttribute('value');
   if( v == 'c')
     value = 0;
   else if( v == 'b')
   {
     var sv = value.toString();
     if(sv.length > 1)
       sv = sv.substr(0,sv.length-1);
     else
       sv='0';
     value = Number(sv);
   }
   else{
     var nv = Number(v);
     value = value*10 + nv ;
   }
   vt.value = value;
   return false;
 }

 function ov(t)
 {
     var mt = t.getElementsByTagName('img');
     mt = mt[0];
     ov.lt = mt;
     ov.ltp = t;
     mt.src = path+"on"+ t.getAttribute('mt');
 }

 function ob()
 {
 if(ov.lt != null)
   ov.lt.src =path+ov.ltp.getAttribute('mt');
 ov.lt = null;
 }

 </script>
 </html> 
//后台 用于支持无脚本
 
using System;
 using System.Collections;
 using System.Configuration;
 using System.Data;
 using System.Web;
 using System.Web.Security;
 using System.Web.UI;
 using System.Web.UI.HtmlControls;
 using System.Web.UI.WebControls;
 using System.Web.UI.WebControls.WebParts;

 /// <summary>
 /// 数字输入页面。
 /// js + postback 两个支持。
 /// </summary>
 public partial class P_DeC : MyPage
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         string newV = CurrentValue;
         string s = Request["s"];
         if (!string.IsNullOrEmpty(s))
         {
             if ("c" == s)
                 CurrentUser.buffer = 0d;
             else if ("b" == s)
             {
                 if (newV.Length > 1)
                     newV = newV.Substring(0, newV.Length - 1);
                 else
                     newV = "0";
                 decimal temp;
                 if (decimal.TryParse(newV, out temp))
                     CurrentUser.buffer = temp;
                 else
                     SysError.GoErorPage("错误命令");
             }
             else
             {
                 newV = newV + s;
                 decimal temp;
                 if (decimal.TryParse(newV, out temp))
                     CurrentUser.buffer = temp;
                 else
                     SysError.GoErorPage("错误命令");
             }
         }
     }

     public string CurrentValue
     {
         get { 
             decimal temp;
             if (CurrentUser.buffer is decimal)
                 temp = (decimal)CurrentUser.buffer;
             else
             {
                 temp = 0;
                 CurrentUser.buffer = temp;
             }
             return temp.ToString();
         }
     }

 }

建立正则表达式对象语法re = new RegExp(/pattern/[flags])

flags 参数说明：g （全文查找出现的所有 pattern）
i （忽略大小写）
m （多行查找）

普通字符	描述
\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。例如，’n’匹配字符 “n”。’\n’ 匹配一个换行符。序列 ‘\\’ 匹配 “\” 而 “\(” 则匹配 “(”。
.	匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符，请使用象 ‘[.\n]‘ 的模式。
x\|y	匹配 x 或 y。例如，’z\|food’ 能匹配 “z” 或 “food”。’(z\|f)ood’ 则匹配 “zood” 或 “food”。
[xyz]	字符集合。匹配所包含的任意一个字符。例如， ‘[abc]‘ 可以匹配 “plain” 中的 ‘a’。
[^xyz]	负值字符集合。匹配未包含的任意字符。例如， ‘[^abc]‘ 可以匹配 “plain” 中的’p'。
[a-z]	字符范围。匹配指定范围内的任意字符。例如，’[a-z]‘ 可以匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符。
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，’[^a-z]‘ 可以匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符。
\cx	匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 ‘c’ 字符。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 [^0-9]。
\w	匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]‘。
\W	匹配任何非单词字符。等价于 ‘[^A-Za-z0-9_]‘。
\xn	匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， ‘\x41′ 匹配“A”。’\x041′ 则等价于 ‘\x04′ & “1″。正则表达式中可以使用 ASCII 编码。.
\num	匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，’(.)\1′ 匹配两个连续的相同字符。
\n	标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则n 为一个八进制转义值。
\nm	标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若? n 和 m 均为八进制数字 (0-7)，则 \nm将匹配八进制转义值 nm。
\nml	如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。
\un	匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。

特殊字符	说明
$	匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 ‘\n’ 或 ‘\r’。要匹配$ 字符本身，请使用 \$。
( )	标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 $ 和 $。
*	匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。
+	匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 +。
.	匹配除换行符 \n之外的任何单字符。要匹配 .，请使用 \。
[	标记一个中括号表达式的开始。要匹配 [，请使用 \[。
?	匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。
\	将下一个字符标记为或特殊字符、或原义字符、或后向引用、或八进制转义符。例如， 'n' 匹配字符'n'。'\n' 匹配换行符。序列 '\' 匹配 ""，而 '\(' 则匹配 "("。
^	匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合。要匹配 ^ 字符本身，请使用\^。
{	标记限定符表达式的开始。要匹配 {，请使用 \{。
\|	指明两项之间的一个选择。要匹配 \|，请使用 \\|。
非打印字符	含义
\cx	匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
n	匹配一个换行符。等价于 x0a 和 cJ。
r	匹配一个回车符。等价于 x0d 和 cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [?\f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 [^?\f\n\r\t\v]。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。
限定符	描述
*	匹配前面的子表达式零次或多次。例如，zo* 能匹配 “z” 以及 “zoo”。 * 等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，’zo+’ 能匹配 “zo” 以及 “zoo”，但不能匹配 “z”。+ 等价于 {1,}。
?	匹配前面的子表达式零次或一次。例如，”do(es)?” 可以匹配 “do” 或 “does” 中的”do” 。? 等价于 {0,1}。
{n}	n 是一个非负整数。匹配确定的 n 次。例如，’o{2}’ 不能匹配 “Bob” 中的 ‘o’，但是能匹配 “food” 中的两个o。
{n,}	n 是一个非负整数。至少匹配n 次。例如，’o{2,}’ 不能匹配 “Bob” 中的 ‘o’，但能匹配 “foooood” 中的所有o。’o{1,}’ 等价于 ‘o+’。’o{0,}’ 则等价于 ‘o*’。
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， “o{1,3}” 将匹配 “fooooood” 中的前三个 o。’o{0,1}’ 等价于 ‘o?’。请注意在逗号和两个数之间不能有空格。
定位符	描述
^	匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 ‘\n’ 或 ‘\r’ 之后的位置。
$	匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 ‘\n’ 或 ‘\r’ 之前的位置。
\b	匹配一个单词边界，也就是指单词和空格间的位置。
\B	匹配非单词边界。

否有匹配
regexpObject.test(string)
返回值为Boolean型
 var re = new RegExp(/\bbe\b/g); var str = "To be, ornot to be:That is the question:"; alert(str.search(re));
string.search(regexpObject)
返回匹配字符的位置，无匹配返回-1
 var re = new RegExp(/\bbe\b/g); var str = "To be, ornot to be:That is the question:"; alert(re.test(str));
得正则匹配信息
regexpObject.exec(string)
 var re = new RegExp(/be/g); var str = "To be, or not to be:That is the question:"; var f; do { f = re.exec(str); alert(f + ":" + f.index); } while(f!=null);
用正则表达式进行字符串替换
string.replace(re, replaceString)
 var re = new RegExp(/be/g); var str = "To be, or not to be:That is the question:"; alert(str.replace(re, "*"));

 
 下面都是我收集的一些比较常用的正则表达式，因为平常可能在表单验证的时候，用到的比较多。特发出来，让各位朋友共同使用。呵呵。


 匹配中文字符的正则表达式： [u4e00-u9fa5]
 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了


 匹配双字节字符(包括汉字在内)：[^x00-xff]
 评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）


 匹配空白行的正则表达式：ns*r
 评注：可以用来删除空白行


 匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />
 评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力


 匹配首尾空白字符的正则表达式：^s*|s*$
 评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式






 匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
 评注：表单验证时很实用


 匹配网址URL的正则表达式：[a-zA-z]+://[^s]*
 评注：网上流传的版本功能很有限，上面这个基本可以满足需求


 匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
 评注：表单验证时很实用


 匹配国内电话号码：d{3}-d{8}|d{4}-d{7}
 评注：匹配形式如 0511-4405222 或 021-87888822


 匹配腾讯QQ号：[1-9][0-9]{4,}
 评注：腾讯QQ号从10000开始


 匹配中国邮政编码：[1-9]d{5}(?!d)
 评注：中国邮政编码为6位数字


 匹配身份证：d{15}|d{18}
 评注：中国的身份证为15位或18位


 匹配ip地址：d+.d+.d+.d+
 评注：提取ip地址时有用


 匹配特定数字：
 ^[1-9]d*$　 　 //匹配正整数
 ^-[1-9]d*$ 　 //匹配负整数
 ^-?[1-9]d*$　　 //匹配整数
 ^[1-9]d*|0$　 //匹配非负整数（正整数 + 0）
 ^-[1-9]d*|0$　　 //匹配非正整数（负整数 + 0）
 ^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮点数
 ^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数
 ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数
 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
 ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）
 评注：处理大量数据时有用，具体应用时注意修正


 匹配特定字符串：
 ^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
 ^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
 ^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
 ^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
 ^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串


 在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:


 只能输入数字：“^[0-9]*$”
 只能输入n位的数字：“^d{n}$”
 只能输入至少n位数字：“^d{n,}$”
 只能输入m-n位的数字：“^d{m,n}$”
 只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
 只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
 只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
 只能输入非零的正整数：“^+?[1-9][0-9]*$”
 只能输入非零的负整数：“^-[1-9][0-9]*$”
 只能输入长度为3的字符：“^.{3}$”
 只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
 只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
 只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
 只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
 只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
 验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，


 只能包含字符、数字和下划线。
 验证是否含有^%&’,;=?$”等字符：“[^%&',;=?$x22]+”
 只能输入汉字：“^[u4e00-u9fa5],{0,}$”
 验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
 验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
 验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”


 正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，


 “XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
 验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
 验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
 验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”


 正确格式为：“01”“09”和“1”“31”。


 匹配中文字符的正则表达式： [u4e00-u9fa5]
 匹配双字节字符(包括汉字在内)：[^x00-xff]
 匹配空行的正则表达式：n[s| ]*r
 匹配HTML标记的正则表达式：/<(.*)>.*|< (.*) />/
 匹配首尾空格的正则表达式：(^s*)|(s*$)
 匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
 匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w-./?%&=]*)?


 (1)应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
 String.prototype.len=function(){returnthis.replace([^x00-xff]/g,”aa”).length;}


 (2)应用：JavaScript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现
 String.prototype.trim = function()
 {
 return this.replace(/(^s*)|(s*$)/g, “”);
 }
 (3)应用：利用正则表达式分解和转换IP地址
 function IP2V(ip) //IP地址转换成对应数值
 {
 re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的正则表达式
 if(re.test(ip))
 {
 returnRegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
 }
 else
 {
 throw new Error(”Not a valid IP address!”)
 }
 }
 (4)应用：从URL地址中提取文件名的javascript程序
 s=”http://www.9499.NET/page1.htm”;
 s=s.replace(/(.*/){0,}([^.]+).*/ig,”$2″) ; //Page1.htm
 (5)应用：利用正则表达式限制网页表单里的文本框输入内容
 用正则表达式限制只能输入中文：οnkeyup=”value=”/blog/value.replace(/["^u4E00-u9FA5]/g,”)” onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^u4E00-u9FA5]/g,”))”
 用正则表达式限制只能输入全角字符：οnkeyup=”value=”/blog/value.replace(/["^uFF00-uFFFF]/g,”) ”onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^uFF00-uFFFF]/g,”))”
 用正则表达式限制只能输入数字：οnkeyup=”value=”/blog/value.replace(/["^d]/g,”)“onbeforepaste=“clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^d]/g,”))”
 用正则表达式限制只能输入数字和英文：οnkeyup=”value=”/blog/value.replace(/[W]/g,””)“onbeforepaste=”clipboardData.setData(’text’,clipboardData.getDa

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。