JavaScript：只能輸入數字(IE、FF)
為瞭解決只能輸入數位問題，網上有許多資料，現歸攏一下。
一、不帶負號的輸入
這裡，沒有解決“加號或減號”的問題。
由於“加號或減號”必須出現在數位最前端，因此，必須要判斷當前游標所在的位置是否在輸入文字框的首位。
<script language="JavaScript" type="text/javascript" >
<!--
//調用方式：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(); }
--> </script> |
二、帶負號的輸入
判斷帶負號的輸入，則必須要知道游標的位置，也就是說，只有當游標在最前端時，負號才有效。
<script language="JavaScript" type="text/javascript" >
<!--
//調用方式：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;
} --> </script> |
getPosition(obj)函數，是一個擷取游標位置的通用函數。
為了減少傳入的參數，事件對象是可以通過事件擷取的：
| var el = window.event.srcElement||ev.target; |
只需將傳DigitInput(el,ev)的第一句加上上面這條語句，並且將傳入參數只有ev一個即可，這樣，減少了傳入值。
三、擴充
我們可以增加一個傳入的參數值，用於限定允許輸入的數字條件：
1：允許正整數；2、允許正小數；3、允許負整數；4、允許負小數。
當然，傳入一個Regex也可以實現。
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;
}
