限制文本框只能输入数字或浮点数的JS脚步

1、oninput,onpropertychange,onchange的用法

l          onchange触发事件必须满足两个条件:

a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

b)当前对象失去焦点(onblur);

l          onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

l          oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。

<!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>
<title>限制文本框输入数字或浮点数(暂只支持IE)</title>
</head>
<body>
<table border="" cellspacing="" cellpadding="" width="100%" style="background-color:#ccc; font-size:12px;">
<tr>
<td style="height:100px; background-color:#fff;" colspan="" align="center" valign="middle">
<h3>限制文本框输入数字或浮点数(暂只支持IE)</h3></td>
</tr>
<tr>
<td style="width: 30%; height:25px; background-color:#fff; padding-left:10px;">
该文本框只允许输入整型:</td>
<td style=" background-color:#fff; padding-left:10px;">
<input type="text" id="input1" name="input1" onpropertychange="javascript:CheckInputInt(this);" /></td>
</tr>
<tr>
<td style="width: 30%; height: 25px; background-color: #fff; padding-left:10px;">
该文本框允许输入浮点数:</td>
<td style="background-color: #fff; padding-left:10px;">
<input type="text" id="input2" name="input2" onpropertychange="javascript:CheckInputFloat(this);" /></td>
</tr>
<tr>
<td align="center" colspan="" rowspan="" style="padding-left: 10px; height: 58px;
background-color: #fff">
<a href="http://bbs.51aspx.com">返回上级</a></td>
</tr>
<tr>
</tr>
</table> <script language="javascript" type="text/javascript">
// Int 51-aspx
function CheckInputInt(oInput)
{
if ('' != oInput.value.replace(/\d/g,''))
{
oInput.value = oInput.value.replace(/\D/g,'');
}
} //Float 51aspx
function CheckInputFloat(oInput)
{
if('' != oInput.value.replace(/\d{,}\.{,}\d{,}/,''))
{
oInput.value = oInput.value.match(/\d{,}\.{,}\d{,}/) == null ? '' :oInput.value.match(/\d{,}\.{,}\d{,}/);
}
}
</script> </body>
</html>
上一篇:js事件委托篇(附js一般写法和js、jq事件委托写法)


下一篇:asp.net core 系列 8 Razor框架路由(下)