您的位置:首页 > Web前端 > JavaScript

js 只允许 输入数字

2012-02-15 13:26 106 查看
原文章在:/article/6196713.html

写得很不错,实用,可以自己修改一下扩展相关功能:

为了解决只能输入数字的问题,网上有许多资料,现归拢一下。

一、不带负号的输入

这里,没有解决“正负号”的问题。

由于“正负号”必须出现在数字的最前端,因此,必须要判断当前光标所在的位置是否在输入文本框的首位。

<!--
//调用方式:onkeydown = "DigitInput(this,event);"
function DigitInput(el,ev) {
//8:退格键、46:delete、37-40: 方向键
//48-57:小键盘区的数字、96-105:主键盘区的数字
//110、190:小键盘区和主键盘区的小数
//189、109:小键盘区和主键盘区的负号
var event = ev || window.event;                             //IE、FF下获取事件对象
var currentKey = event.charCode||event.keyCode;             //IE、FF下获取键盘码

//小数点处理
if (currentKey == 110 || currentKey == 190) {
if (el.value.indexOf(".")>=0)
if (window.event)                       //IE
event.returnValue=false;                 //e.returnValue = false;效果相同.
else                                    //Firefox
event.preventDefault();
} else
if (currentKey!=8 && currentKey != 46 && (currentKey<37 || currentKey>40) && (currentKey<48 || currentKey>57) && (currentKey<96 || currentKey>105))
if (window.event)                       //IE
event.returnValue=false;                 //e.returnValue = false;效果相同.
else                                    //Firefox
event.preventDefault();
}
-->


二、带负号的输入

  判断带负号的输入,则必须要知道光标的位置,也就是说,只有当光标在最前端时,负号才有效。

<!--
//调用方式:onkeydown = "DigitInput(this,event);"
function DigitInput(el,ev) {
//8:退格键、46:delete、37-40: 方向键
//48-57:小键盘区的数字、96-105:主键盘区的数字
//110、190:小键盘区和主键盘区的小数
//189、109:小键盘区和主键盘区的负号
var event = ev || window.event;                             //IE、FF下获取事件对象
var currentKey = event.charCode||event.keyCode;             //IE、FF下获取键盘码

//小数点处理
if (currentKey == 110 || currentKey == 190) {
if (el.value.indexOf(".")>=0)
if (window.event)                       //IE
event.returnValue=false;                 //e.returnValue = false;效果相同.
else                                    //Firefox
event.preventDefault();
} else
//负号处理
if (currentKey == 189 || currentKey == 109) {
if (getPosition(el)>0 || el.value.indexOf("-")>=0)
if (window.event)                       //IE
event.returnValue=false;                 //e.returnValue = false;效果相同.
else                                    //Firefox
event.preventDefault();
} else
if (currentKey!=8 && currentKey != 46 && (currentKey<37 || currentKey>40) && (currentKey<48 || currentKey>57) && (currentKey<96 || currentKey>105))
if (window.event)                       //IE
event.returnValue=false;                 //e.returnValue = false;效果相同.
else                                    //Firefox
event.preventDefault();
}
/**
* 获取光标所在的字符位置
* @param obj 要处理的控件, 支持文本域和输入框
* @author hotleave
*/
function getPosition(obj){
var result = 0;
if(obj.selectionStart){ //非IE浏览器
result = obj.selectionStart
}else{                  //IE
var rng;
if(obj.tagName == "TEXTAREA"){ //如果是文本域
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
}else{                         //输入框
rng = document.selection.createRange();
}
rng.moveStart("character",-event.srcElement.value.length);
result = rng.text.length;
}
return result;
}
-->


getPosition(obj)函数,是一个获取光标位置的通用函数。

为了减少传入的参数,事件对象是可以通过事件获取的:

var el = window.event.srcElement||ev.target;


只需将传DigitInput(el,ev)的第一句加上上面这条语句,并且将传入参数只有ev一个即可,这样,减少了传入值。

三、扩展

  我们可以增加一个传入的参数值,用于限定允许输入的数字条件:

1:允许正整数;2、允许正小数;3、允许负整数;4、允许负小数。

当然,传入一个正则表达式也可以实现。

function onlyNum()
{
if(!( (event.keyCode >= 48 && event.keyCode<=57 )
||( event.keyCode >= 96 && event.keyCode <= 105 )
|| ( event.keyCode == 8 )   //退格
|| ( event.keyCode == 46 ) //Del
|| ( event.keyCode == 27 ) //ESC
|| ( event.keyCode == 37 ) //左
|| ( event.keyCode == 39 ) //右
|| ( event.keyCode == 16 ) //shift
|| ( event.keyCode == 9 ) //Tab
)
)
//考虑小键盘上的数字键
event.returnValue=false;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: